javascript - 选择框自动选择

Question

我想使用 jQuery 或 JavaScript 创建自动选择框。我有四个选择框。如果我从每个选择框中选择一个选择框，我想为其他选择框选择自动选择。现在，我的设计取决于第一个选择框。我怎样才能做到这一点 ？请帮助我。

html

<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>

<select name="select3" id="select3">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

javascript

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ),
    $select4 = $( '#select4' ),
$option2 = $select2.find( 'option' ),
$option3 = $select3.find( 'option' ),
$option4 = $select4.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $option2.filter( '[value="' + this.value + '"]' ) ),
$select3.html( $option3.filter( '[value="' + this.value + '"]' ) ),
$select4.html( $option4.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );

Answer 1

对我来说，我认为重复选项值是一件坏事..所以你需要使用data属性它将帮助你在下一个选择中获得正确的值..你可以使用下一个代码

$(document).ready(function(){
  $('#select1').on('change' , function(){
    var getVal = $(this).val();  // get value from the 1st select
    $('#select2 option').hide(); // hide all option for the 2nd select
    $('#select2 option[data-value="'+getVal+'"]').show().first().prop('selected' , true);  // show the options which data-value = the first select value and select the 1st one of them
    $('#select3 option').hide();  // while you don't have duplicated value on select3 you can just use value instead of using `data` attribute 
    $('#select3 option[value="'+getVal+'"]').show().prop('selected' , true);
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
      <option value="1">Fruit</option>
      <option value="2">Animal</option>
      <option value="3">Bird</option>
      <option value="4">Car</option>
  </select>

  <select name="select2" id="select2">
      <option data-value="1" value="1">Banana</option>
      <option data-value="1" value="2">Apple</option>
      <option data-value="1" value="3">Orange</option>
      <option data-value="2" value="4">Wolf</option>
      <option data-value="2" value="5">Fox</option>
      <option data-value="2" value="6">Bear</option>
      <option data-value="2" value="7">Eagle</option>
      <option data-value="3" value="8">Hawk</option>
      <option data-value="4" value="9">BWM<option>
  </select>

<select name="select3" id="select3">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>

说明: 上面的代码在做什么当更改 select1 时

• 获取选定的值
• 隐藏第二次选择时的所有选项
• 显示哪些选项的数据值属性等于从第一个选择中选择的值
• 选择其中第一个

虽然 select3 上没有重复的值，但如果有重复的值，则可以使用与 select2 一起使用的 data 属性

• 隐藏第三次选择时的所有选项
• 显示哪个[value]属性等于第一个选择中选择的值的选项并选择它