如何在第二個下拉列表中更改設置的默認值

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時，我想更改為以下內容（選項1）

<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. 設置該值將使option處於selected ，而不是使用selected屬性。
6. 代替inline-event-binding ，使用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> 

Answer 2

從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;
    }
 });

你的問題會解決

Answer 3

由於上述原因，我修改了Rayon的腳本以根據需要進行更新，如下所示

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