選擇框自動選擇

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