CODEWITHSUNDEEP
javascriptjqueryhtml
Khin san
Khin san

Reputation: 99

select box auto select

I want to create auto select box using jQuery or JavaScript.I have four select box. If I choose one select box from every select box, I want to choose auto select for other select box. Now, my design is depending on first select box. How can I do that ? Please help me.

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' );

Upvotes: 0

Views: 618

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

for me I think it's a bad thing to duplicate the options value .. so you need to use data attribute it will help you to get the right value in the next selection .. you can use the next code

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

Explanation: What code above doing When change select1

  • get the value selected
  • hide all options on 2nd select
  • show options which data-value attribute equal the value selected from the 1st select
  • select the first one of them

while you don't have duplicated values on select3 but if you've duplicated values you can use data attribute which used with select2

  • hide all options on 3rd select
  • show option which [value] attribute equal the value selected from the 1st select and select it

Upvotes: 2

programtreasures
programtreasures

Reputation: 4298

you need to store your values in arrays and according to your first dropdown selection you need to assign respected array values to seccont dropdown

I cant understand what is dropdown2 and 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);

});

Please ignore select3 and select4 from my code

Upvotes: 1

Related Questions