javascript - 让一个选择元素影响另一个

Question

我意识到我正在尝试做的事情更简单，但我希望我不会通过“双重发布”来违反论坛规则，因为这个问题略有不同。开始。我希望“productchoice”影响“productchoice2”。

 <select id="productchoice">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>

  <select id="productchoice2">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>

我的问题是：当“productchoice”发生变化时，我应该输入什么javascript来使“productchoice2”反映相同的选择？

再次感谢您的帮助，善良的人们！

score 2 · Accepted Answer

HTML

<select id="productchoice" onchange="productchoicechange()">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>
<select id="productchoice2">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>

JS

jsfiddle按索引

// by index
function productchoicechange(){
    var productchoice = document.getElementById("productchoice");
    var productchoice2 = document.getElementById("productchoice2");
    productchoice2.options[productchoice.options.selectedIndex].selected = true;
}

jsfiddle按值

// by value
function productchoicechange(){
    var productchoice = document.getElementById("productchoice");
    var productchoice2 = document.getElementById("productchoice2");
    productchoice2.value = productchoice.value;
}

score 1 · Accepted Answer

如果你想使用 jQuery

   $('#productchoice').change(function (){

        $('#productchoice2').val($(this).val());

   });

JSFiddle

score 1 · Accepted Answer

使用纯 JS 你可以这样做：

var select_element = document.getElementById('productchoice');

select_element.onchange = function(e){
    document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}

演示：http: //jsfiddle.net/tymeJV/Zayq4/

score 0 · Accepted Answer

尝试使用 angularJS

JSFiddle：- http://jsfiddle.net/aiioo7/xUPZv/

HTML:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>

javascript - 让一个选择元素影响另一个

4 回答 4

尝试使用 angularJS

Related

Reference