点击<select>和</select><input>页面加载后

Question

I am writing a Greasemonkey script to interact with orders on Shipstation.com.

The script will select certain values in <select> and <input> elements of the order modal based on certain criteria.

Thus, the script must be able to interact with these elements.

However, I cannot figure out how to do so.

So far, I have tried to do the following and have been unable to trigger a click on the element:

• Set the value of the element using JS .value
• Set the value of the element using jQuery .val
• Trigger a click event on the element using JS .click()
• Trigger a click event on the element using this code:

function triggerMostButtons (jNode) {
    triggerMouseEvent (jNode, "mouseover");
    triggerMouseEvent (jNode, "mousedown");
    triggerMouseEvent (jNode, "mouseup");
    triggerMouseEvent (jNode, "click");
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

triggerMostButtons(jNode);

It appears that Shipstation is locking the value of <select> and <input> values.

Here are examples of the SO questions I have read to try and figure this out. I haven't been able to trigger a click on these elements using any of these approaches:

• "Normal" button-clicking approaches are not working in Greasemonkey script?
• How to simulate click in react app using tampermonkey?
• Greasemonkey script to automatically select, and click, a specific button with non-English characters in the value/selector?
• Choosing and activating the right controls on an AJAX-driven site
• Simulating a mousedown, click, mouseup sequence in Tampermonkey?
• javascript click a value in dropdown list
• How to change a <select> value from JavaScript
• How do I programmatically set the value of a select box element using JavaScript?
• Set the value of an input field

How else can I trigger a click on these elements?

Alternatively, how can I set the value of these fields using JS? Do I have to find the data model in the JS and edit the value directly? Or find a way to hijack the functions that are triggered when a user clicks on these elements?

Answer 1

Maybe the values are loaded dynamically from the server, so you need to wait until the full page is loaded by adding a load event .

Then grab the select elements by a document.getElementById (or querySelector ) and set your desired value (If I understood correctly, you don't need a click event).

You didn't provide an example I can work with, but I tried it with this https://www.shipstation.com/step1/ Notice how after the page loads, the country will be set to Canada:

// ==UserScript==
// @name     Unnamed Script 933923
// @version  1
// @grant    none
// @match *://*.shipstation.com/*
// ==/UserScript==


window.addEventListener('load', (event) => {
  
  document.getElementById('country').value = "CA";
  document.getElementById('howdidyouhearaboutus').value = "Banner Ad";
  
});

Answer 2

you can select an option by doing this

function selectItemInDropdownList(selectElement, ov) {
  const optionToSelect = '' + ov
  const options = selectElement.getElementsByTagName('option')
  for (const optionEle of options) {
    if (optionToSelect === optionEle.innerText || optionToSelect === optionEle.value) {
      optionEle.selected = true // selects this option
      return true
    }
  }
  return false // failed
}

/*
const dropdownEle = document.getElementById('whatever')
const status = selectItemInDropdownList(dropdownEle, "WHAT") 
console.log(status ? 'success' : 'failed')
*/

I think main issue is its a popup form and the select element 'may' not be available in DOM tree at first. so make sure to call this function when its available.

Answer 3

This solution works well in 2022. No jQuery is used.

Auto expand select options in element cb :

cb.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))

Input focus on element cb (tested on Safari), watch the compatibility note on MDN :

cb.focus()

Below are the working solution for you to copy and run on a browser. (Since input focus feature is failed to run in the code snippet here, while the feature auto expand the select options still works.)

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <select id="select-1"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <input id="input-1" type="text"/> <script> window.onload = function() { const select = document;getElementById('select-1'). const input = document;getElementById('input-1'). input;focus(). setTimeout(function() { select,dispatchEvent(new MouseEvent('mousedown': { bubbles; true })), }; 1000); } </script> </body> </html>