Question

我有两个HTML选择元素：

<select name="businessName">
    <option name="d3"> Car Ltd </option>
    <option name="e11"> Food Business </option>
    <option name="f2"> Builders </option>
</select>

<select name="businessCode">
    <option name="d3"> d3 </option>
    <option name="e11"> e11 </option>
    <option name="f2"> f2 </option>
</select>

我如何使用JavaScript / jQuery，所以当我更改一个select时，另一个会改变？ E.g：

所以当我选择Car LTD时，它会显示d3
或当我选择Builders时会显示f2
或当我选择f2时，它会在另一个

Answer 1

<强> jsBin demo

您的options应该具有 VALUE 属性（name的实例）：

<select name="businessName">
    <option value="d3"> Car Ltd </option>
    <option value="e11"> Food Business </option>
    <option value="f2"> Builders </option>
</select>

<select name="businessCode">
    <option value="d3"> d3 </option>
    <option value="e11"> e11 </option>
    <option value="f2"> f2 </option>
</select>

这就是你所需要的：

var $sel = $('[name=businessName], [name=businessCode]');

$sel.change(function(){
  $sel.not(this).val( this.value );
});

Answer 2

一种可能的方法：

var $businessNameSelect = $('[name=businessName]');
var $businessCodeSelect = $('[name=businessCode]');
$businessNameSelect.on('change', function() {
  $businessCodeSelect[0].selectedIndex = this.selectedIndex;
});
$businessCodeSelect.on('change', function() {
  $businessNameSelect[0].selectedIndex = this.selectedIndex;
});

Demo。关键是在selectedIndex的{{1}}属性上运行。引用DOM Level 2 docs：

  类型长
的
HTMLSelectElement
所选选项的序数索引，从0开始。值   如果未选择任何元素，则返回-1。

Answer 3

示例代码段

＆＃13;

    $("#bsname").change(function() {
        $("#bscode")[0].selectedIndex = $(this)[0].selectedIndex;
    });

    $("#bscode").change(function() {
        $("#bsname")[0].selectedIndex = $(this)[0].selectedIndex;
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bsname" name="businessName">
        <option name="d3"> Car Ltd </option>
        <option name="e11"> Food Business </option>
        <option name="f2"> Builders </option>
    </select>

    <select id="bscode" name="businessCode">
       <option name="d3"> d3 </option>
       <option name="e11"> e11 </option>
       <option name="f2"> f2 </option>
    </select>

＆＃13;

＆＃13; JSFiddle

Answer 4

我希望这是实际预期的结果：

＆＃13;

$(".dittoSelect").change(function() {
  if ($(this).attr("name") == "businessName") {
    
    $("#businessCode option[name='" + $('option:selected', this).attr('name') + "']").attr("selected", "selected");
    
  } else {
    
    $("#businessName option[name='" + $('option:selected', this).attr('name') + "']").attr("selected", "selected");
    
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="businessName" id="businessName" class="dittoSelect">
  <option name="d3">Car Ltd</option>
  <option name="e11">Food Business</option>
  <option name="f2">Builders</option>
</select>

<select name="businessCode" id="businessCode" class="dittoSelect">
  <option name="d3">d3</option>
  <option name="e11">e11</option>
  <option name="f2">f2</option>
</select>

＆＃13;

Answer 5

我可以看到一些jQuery方法，并认为提供一个不需要jQuery的不同方法是个好主意。

＆＃13;

    function Events(){
       var selections = document.getElementsByClassName('selection');
       // Add EventListeners to each element with the class off Selection
        for(var i=0; i<selections.length; i++) {
        	selections[i].addEventListener("change",function(){PreSelect(this)},false);
        }
    }
    function PreSelect(e){
    	var selections = document.getElementsByClassName('selection');
    	for(var i=0; i<selections.length; i++) {
    		//Set select to changed index
        	selections[i].selectedIndex=e.selectedIndex;
        }
    }
    window.onload=Events;

＆＃13;

    <select class="selection" name="businessName">
        <option name="d3"> Car Ltd </option>
        <option name="e11"> Food Business </option>
        <option name="f2"> Builders </option>
    </select>
    
    <select class="selection" name="businessCode">
       <option name="d3"> d3 </option>
       <option name="e11"> e11 </option>
       <option name="f2"> f2 </option>
    </select>

＆＃13;

相互更改两个选择元素

5 个答案:

示例代码段