自动下拉更改(反之亦然)

时间:2016-05-26 19:01:49

标签: javascript jquery

我需要根据前两个字段自动更改第3个字段。 (如果我更改第3个字段然后前2个字段也会更改,那将是最好的)

我需要一个Jquery解决方案。有人可以帮我吗?

<select id="First">
  <option val="car">car</option>
  <option val="phone">phone</option>
</select>

<select id="Second">
  <option val="car">car</option>
  <option val="phone">phone</option>
  <option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
  <option val="carcar">car car</option>
  <option val="carphone">car phone</option>
  <option val="carboll">car boll</option>
  <option val="phonecar">phone car</option>
  <option val="phonephone">phone phone</option>
  <option val="phonecarboll">phone boll</option>
</select>

1 个答案:

答案 0 :(得分:0)

这是你正在寻找的吗?

&#13;
&#13;
$(document).ready(function() {
  // on change for the 3rd select
  $("#ChangeItAutomatically").on("change", function() {
    // get the value and split on space
    var value = $(this).val().split(" ");
    
    // select the other two selects based on the values
    $("#First").val(value[0]);
    $("#Second").val(value[1]);
  });

  // on change for the first two selects
  $("#First, #Second").on("change", function() {
    // set the value of the 3rd select based on the combination of values of the first two
    $("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
  <option val="car">car</option>
  <option val="phone">phone</option>
</select>

<select id="Second">
  <option val="car">car</option>
  <option val="phone">phone</option>
  <option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
  <option val="car car">car car</option>
  <option val="car phone">car phone</option>
  <option val="car boll">car boll</option>
  <option val="phone car">phone car</option>
  <option val="phone phone">phone phone</option>
  <option val="phone boll">phone boll</option>
</select>
&#13;
&#13;
&#13;

相关问题