如何以不同的方式使用相同的功能?

时间:2015-07-31 10:19:43

标签: javascript jquery html drop-down-menu javascript-events

我有两个下拉菜单。当我在第一个下拉列表中选择一个选项时,第二个下拉值将根据第一个下拉值更改。

HTML CODE

<select id="one">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="two">
    <option value="a">A</option>
    <option value="b">B</option>
</select>

JS CODE

$("#one").change(function () {
    if ($("#one").val() == 'a') {
        $("#two").val("b")
    } else if ($("#one").val() == 'b') {
        $("#two").val("a")
    }
});

$("#two").change(function () {
    if ($("#two").val() == 'a') {
        $("#one").val("b")
    } else if ($("#two").val() == 'b') {
        $("#one").val("a")
    }
});

两个下拉列表的代码都执行相同的功能。有没有有效的方法来减少代码?就像声明一个常用函数并将它用于两个下拉列表一样(如原型)?

这是JSFiddle

6 个答案:

答案 0 :(得分:5)

  1. 将常用class添加到两个下拉列表中。
  2. 使用公共类
  3. 在元素上绑定change事件
  4. 使用siblings()设置其他下拉菜单的value
  5. 使用trigger()更新页面加载时的下拉值。
  6. Demo

    $('.mySelect').on('change', function() {
      var newVal = $(this).val() == 'a' ? 'b' : 'a';
      $(this).siblings('.mySelect').val(newVal);
    
      // Even Shorter
      // $(this).siblings('.mySelect').val($(this).val() == 'a' ? 'b' : 'a');
    }).trigger('change');
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <select id="one" class="mySelect">
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
    <select id="two" class="mySelect">
      <option value="a">A</option>
      <option value="b">B</option>
    </select>

答案 1 :(得分:1)

喜欢这个吗?

$('#one,#two').on('change', function() {
  var other = ( $(this).attr('id') == 'one' ) ? '#two' : '#one';
  
  var value = ( $(this).val() == 'a' ) ? 'b' : 'a';
  
  $(other).val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option value="a">A</option>
    <option value="b">B</option>
</select>
<select id="two">
    <option value="a">A</option>
    <option value="b">B</option>
</select>

答案 2 :(得分:0)

当然,有很多方法可以做到:

function onChange($element, $other) {
  if($element.val() == 'a'){
    $other.val("b")
  }else if($other.val() == 'b'){
    $element.val("a")
  }
}

在此处查看:

&#13;
&#13;
function onChange($element, $other) {
  if ($element.val() == 'a') {
    $other.val("b")
  } else if ($element.val() == 'b') {
    $other.val("a")
  }
}

$('#one, #two').change(function() {
  var other = $('#one, #two').not(this);
  onChange($(this), other);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
<select id="two">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

使它成为一个带有两个参数的函数来传递你的下拉列ID:

$("#one").change(switchSelection("#two", "#one"));

$("#two").change(switchSelection("#one", "#two"));

function switchSelection(x, y) {
    if($(y).val() == 'a') {
        $(x).val("b")
    }
    else if ($(x).val() == 'b') {
        $(y).val("a");
    }
};

答案 4 :(得分:0)

最简单的方法(给定你的代码) - 虽然 最有效 - 但是将as参数中的select元素传递给公共函数调用。

var handleChange = function($select, $linkedSelect){
    if($select.val() == 'a'){
        $linkedSelect.val("b")
    }else if($select.val() == 'b'){
        $linkedSelect.val("a")
    }
}; 

$("#one").change(function(){
    handleChange($(this),$('#two'));
});

$("#two").change(function(){
    handleChange($(this),$('#one'));
});

Here's a fiddle of that in action.

答案 5 :(得分:0)

$('#one,#two').change(function() {
 var opositeIdObj = {"one":"two","two":"one"};
 var opositeValObj = {"a":"b","b":"a"};
 $("#"+opositeIdObj[this.id]).val(opositeValObj[this.value]);
}).trigger('change');