How to change the setected default value in a 2nd drop down list

Question

I have two drop down list "optionone" and "optiontwo" and I want to change the default selected value from "option value=3>3" to option value=3 selected>3 when 2 is selected from my first dropdown list ("optionone")

<script>

function myFunction() {
    var mylist = document.getElementById("optionone");
        var myvalue = mylist.options[mylist.selectedIndex].value

        if (myvalue == 2) {
        //do stuff
    document.getElementById("optiontwo")
        //Change <option value=3>3 to <option value=3 selected>3
        }

}
</script>

My drop down list

<select name="optionone" onchange="myFunction()">
  <option value=1>1
  <option value=2>2
  <option value=3>3
  <option value=4>4
  <option value=5>5
  <option value=6>6
</select>

<select name="optiontwo">
  <option value=1>1
  <option value=2>2
  <option value=3>3
  <option value=4>4
  <option value=5>5
  <option value=6>6
</select>

Which I want to change to the following when 2 is select from my first drop down list (optionone)

<select name="optiontwo">
  <option value=1>1
  <option value=2>2
  <option value=3 selected>3
  <option value=4>4
  <option value=5>5
  <option value=6>6
</select>

I'm a bit stuck

Possible duplicate of [Change the selected value of a drop-down list with jQuery](http://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery) — nyname00, Apr 14 '16 at 11:14

Rayon · Answer 1 · 2016-04-14T10:57:20.700

You have a invalid markup, <option> must be closed
There is no id attribute for second select input
You can set the value attribute instead of finding the option value using index.
value should be wrapped in quote
Instead of playing with selected attribute, setting the value will make option selected.
Instead of inline-event-binding, use addEventListener

/*
function myFunction(elem) {
  document.getElementById("optiontwo").value = elem.value;
}
*/
document.getElementById('optionone').addEventListener('change', function() {
  document.getElementById("optiontwo").value = this.value;
});

<select name="optionone" id="optionone" onchange="myFunction(this)">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
</select>

Parth Jasani · Answer 2 · 2016-04-15T05:14:11.457

0

remove onChange="" from html

And update you code or markup like this ..

<select name="optionone" id="optionone">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
</select>
<select name="optiontwo" id='optiontwo'>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4'>4</option>
  <option value='5'>5</option>
  <option value='6'>6</option>
</select>

and then add this javascript code

 document.getElementById('optionone').addEventListener('change',
 function() {
    if(this.value == 2){
       document.getElementById("optiontwo").value = 3;
    }
 });

and your problem will solve

edited Apr 15 '16 at 05:14

answered Apr 14 '16 at 11:11

Parth Jasani

2,349
1
19
26

This is jquery so I would need to add the jquery library for this to work, which it does – Rich Apr 14 '16 at 14:44
@Rich see my example i updated that so you can get javascript code – Parth Jasani Apr 15 '16 at 05:15

score 0 · Answer 3 · answered Apr 14 '16 at 14:31

Thanks to the above I adapted Rayon's script to update as I wanted, as follows

<script>
document.getElementById('optionone').addEventListener('change', function() {
    if (this.value == 2){
       document.getElementById("optiontwo").value = 3;
    }
});
</script>

How to change the setected default value in a 2nd drop down list

3 Answers3