如何在第二个下拉列表中更改设置的默认值

Question

我有两个下拉列表“optionone”和“optiontwo”，当我从第一个下拉列表中选择 2 时，我想将默认选择值从“option value=3>3”更改为 option value=3 selected>3列表（“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>

我的下拉列表

<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>

当从我的第一个下拉列表（选项一）中选择 2 时，我想更改为以下内容

<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>

我有点卡住了

Answer 1

1. 您的markup 无效，<option> 必须关闭
2. 第二个选择输入没有id 属性
3. 您可以设置value 属性，而不是使用索引查找选项值。
4. value 应该被包裹在 quote
5. 而不是使用selected 属性，设置该值将使option 被选中。
6. 使用addEventListener 代替inline-event-binding

/*
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>

Answer 2

多亏了上面我对Rayon的脚本进行了我想要的更新，如下

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

Answer 3

从 html 中移除 onChange=""

然后像这样更新你的代码或标记..

<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> 

然后添加这个javascript代码

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

你的问题会解决的