0

I have an issue with changing value of dropdown with js.

Already implemented chaging value of input using document.execCommand("insertText", false, "text").

const firstName = document.getElementById("payment.billingAddress.firstName");
firstName.focus();
firstName.select();
document.execCommand("insertText", false, "Rockers");

But dropdown is not working with it.

Let me know how to do manage it if you has experience in it already.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
ChengGuo Kang
  • 1
  • 1
  • I made you a snippet. Please update it with HTML to have a [mcve] – mplungjan May 03 '21 at 11:58
  • 1
    I am trying to build autofill script on bestbuy.com. You can find billing address form on the final payment page. I tried to change the value of the inputs by just setting element.value = ''text' , but it could not change the real value of the input. So I used document.execCommand("insertText", false, "text") and it worked for inputs. But I have new issue with dropdown. it does not work with the command. – ChengGuo Kang May 03 '21 at 12:02
  • Please update the question with information and relevant HTML – mplungjan May 03 '21 at 12:08
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand is deprecated, so I advise avoiding its usage – Hive7 May 03 '21 at 12:08
  • Expected behavior. I want to change value of the dropdown programically. – ChengGuo Kang May 03 '21 at 12:09
  • Yeah, I found it is deprecated already, but I did not find any others that works with the form. – ChengGuo Kang May 03 '21 at 12:10
  • `execCommand` doesn't work with form, it works with selections. When you're going to work with a new element you haven't worked before, I'd suggest you to search it at MDN, scroll to the "Technical summary", and click the link on "DOM interface" row. That leads you to a [page](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement), which contains all you need to know for how to use the element by JS. Then if you'll still get stuck, ask a question. – Teemu May 03 '21 at 12:33
  • Hi, Teemu, could you please explain more? As I already implemented changing value of the inputs from the form using execCommand, and have issue with dropdown. Thanks. – ChengGuo Kang May 03 '21 at 14:40
  • Yes, you can do that with an input, as its content is selectable. Althought it's much easier just to set the value of an input instead of using `execCommand`. If the task is just to change the selected value, you can do it by setting `select.value = x;`, where `x` is the text of the value of an option element included in the select element. If you really need to assign new text to the options, you've to iterate ex. `select.options` collection, and set `text` of each option. – Teemu May 03 '21 at 16:51
  • I'd suggest you to read about the DOM, and specifically about [DOM manipulation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents), it makes your life much easier in the future. – Teemu May 03 '21 at 17:06

0 Answers0