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属性它会帮助你在下一个选择中获得正确的值..你可以使用下一个代码

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

说明： 上面的代码更改select1时

获取选定的值
隐藏第二次选择
显示哪个数据值属性等于从第一个选择
选择第一个

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

隐藏第三次选择
显示选项[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

选择框自动选择

2 个答案: