So What I am trying to do with Javascript, is make it so when I do something similar to document.getElementByID("product-select").value = "34"; It will automatically press it for me.

Whenever I try to do this what it does is it makes the drop down menu go blank and It wont change it automatically. Can I have some help ?

<div id="product-variants" class="">
  <div class="select-wrapper">
    <select id="product-select" name="id" class="">




      <option value="28223706565">32</option>



      <option value="28223706629">34</option>



      <option value="28223706693">36</option>


    </select>
  </div>
</div>

So What I am trying to do with Javascript, is make it so when I do something similar to document.getElementByID("product-select").value = "34"; It will automatically press it for me.

Whenever I try to do this what it does is it makes the drop down menu go blank and It wont change it automatically. Can I have some help ?

<div id="product-variants" class="">
  <div class="select-wrapper">
    <select id="product-select" name="id" class="">




      <option value="28223706565">32</option>



      <option value="28223706629">34</option>



      <option value="28223706693">36</option>


    </select>
  </div>
</div>

• javascript
• drop-down-menu

• 2 Possible duplicate of How to change html selected option using JavaScript? – Yoann Commented May 7, 2017 at 13:16
• @YoannM Hey, No It's not. I have tried PICTURE OF ERROR With the code : document.getElementById('product-select').value=34; And nothing happens – Bigboymanted Commented May 7, 2017 at 13:19
• Yes, it is... document.getElementByID("product-select").value = "28223706629"; – brasofilo Commented May 7, 2017 at 13:45

3 Answers 3

Reason for why drop down value is not changing automatically is, When you are setting value of drop down using document.getElementByID("product-select").value = "34", it will not select option with text node as 34, this will change the dropdown only when one of your options has value of 34. In order to make it work you can change your implementation as show below :

var options = document.getElementById("product-select").options;
for (var i = 0; i < options.length; i++) {
  if (options[i].text == "34") {
    options[i].selected = true;
    break;
  }
}

Perhaps

document.getElementByID("product-select").value = "34";

should be

document.getElementByID("product-select").value = "28223706629";

Another approach is to refer to the index such as

document.getElementById("product-select").selectedIndex = 1;

If you know the order of your values you can use the

document.getElementByID("product-select").selectedIndex method

If you want to choose the value 34 in this case it is the second option so its index is 1, 32 index would be 0 and 36 index would be 2

So if you want to change the value to 34 you call

document.getElementByID("product-select").selectedIndex = 1