选择框自动选择

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

对我来说，我认为复制options值是一件坏事..因此您需要使用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属性

• 隐藏第3个选择的所有选项
• 显示选项，其中[value]属性等于从第一个选择中选择的值，然后选择它

Answer 2

您需要将值存储在数组中，并且根据您的第一个下拉选择，您需要为seccont下拉列表分配受尊重的数组值

我不明白什么是dropdown2和dropdown3？

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ),
    $select4 = $( '#select4' ),
$option2 = $select2.find( 'option' ),
$option3 = $select3.find( 'option' ),
$option4 = $select4.find( 'option' );

var objectTypeValues = ['Fruit','Animal','Bird','Car'];
var fruiteValues = ['Banana','Apple','Orange',''];
var carValues = ['BWM'];
var animalValues = ['Wolf','Fox','Bear'];
var birdValues = ['Eagle','Hawk'];


$select1.on( 'change', function() {
  var valuesTobeBind = null;
  console.log(this.value);
  switch(this.value){
    case 'Fruit':
      valuesTobeBind = fruiteValues;
        break;
      case 'Animal':
      valuesTobeBind = animalValues;
        break;
      case 'Bird':
      valuesTobeBind = birdValues;
        break;
      case 'Car':
      valuesTobeBind = carValues;
        break;
  }

  $select2.html('');
  var selecthtml;
  for (var i = 0; i<=valuesTobeBind.length; i++){        
    selecthtml+='<option value="'+  valuesTobeBind[i]+'">'+  valuesTobeBind[i]+'</option>';
  }
  $select2.html(selecthtml);

});

请忽略我的代码中的select3和select4