3

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>
Bigboymanted
  • 43
  • 1
  • 1
  • 4
  • 2
    Possible duplicate of [How to change html selected option using JavaScript?](http://stackoverflow.com/questions/10911526/how-to-change-html-selected-option-using-javascript) – Yoann May 07 '17 at 13:16
  • @YoannM Hey, No It's not. I have tried [PICTURE OF ERROR](http://i.imgur.com/tHS6ZVo.png) With the code : document.getElementById('product-select').value=34; And nothing happens – Bigboymanted May 07 '17 at 13:19
  • Yes, it is... `document.getElementByID("product-select").value = "28223706629";` – brasofilo May 07 '17 at 13:45

3 Answers3

6

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;
  }
}
Ru Chern Chong
  • 3,692
  • 13
  • 33
  • 43
Nishesh Pratap Singh
  • 2,131
  • 2
  • 13
  • 20
  • Thank you so much! You have fixed it. I'm so happy. Now I'm assuming if I wanted to change it to "32" for example that would still work ? – Bigboymanted May 07 '17 at 13:25
  • Yes! and if you want to make it work on some condition then put this code in a function and take an argument for setting value in dropdown. – Nishesh Pratap Singh May 07 '17 at 13:26
  • Hey, I know this was solved ages ago, But now this code does not work ? If I add my original elementgetbyclassname ? It says undefined in the console :( – Bigboymanted Jun 01 '17 at 14:01
  • Can you show me what you are trying to do? If you are using `getElementsByClassName` then you need to mention the index of the element as well and if you have only one element having that class then you can do `getElementsByClassName("YOUR_CLASS_NAME")[0]` – Nishesh Pratap Singh Jun 02 '17 at 07:41
2

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;
Tim D
  • 650
  • 1
  • 12
  • 18
  • Hey @Tim D This is the error that is still happening with selectedIndex. [Here is the photo](http://i.imgur.com/Gq5nRDZ.png) – Bigboymanted May 07 '17 at 13:21
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

Quartal
  • 410
  • 3
  • 14