how to change dropdowns values based on a selection of another dropdown using jquery

Question

I have my first dropdown with 2 selections: Standard Glass and Tempered glass. I have another dropdown where the user can select the width of the glass.

My problem: the second dropdown values need to change depending on what kind of glass was selected in the first dropdown.

Look at my code, I have the 2 dropdowns with an id of glassWidthStandard and the other dropdown glassWidthTempered.

Thank you :) here is my code:

 <select id="typeOfGlass">
  <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select><br>


Glass Width for Standard:<br>
    <select id="glassWidthStandard">
        <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
    </select>

Glass Width for Tempered:<br>
    <select id="glassWidthTempered">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

but where is your jquery code? what have you tried? Consider adding a jsfiddle. — Ofir Baruch
– Ofir Baruch, Commented Jun 5, 2015 at 16:39
What you want to achieve is not quiet clear. As i see there are three dropdowns. — divy3993
– divy3993, Commented Jun 5, 2015 at 16:42
I do not know where to start, I found this: link but the parameter to filter is the options, I cannot have the same values for groups for the second dropdown. — ilovedoingwebsites
– ilovedoingwebsites, Commented Jun 5, 2015 at 16:43
Yes, there are 3 dropdowns, the first dropdown will select which of the 2 other remaining dropdowns should show — ilovedoingwebsites
– ilovedoingwebsites, Commented Jun 5, 2015 at 16:43
I'll help you out with some pseudo code: on change of #typeOfGlass, hide or show the corresponding select. Now show use your love for doing websites and we'll show you some love in return. — technophobia
– technophobia, Commented Jun 5, 2015 at 16:46

depperm · Accepted Answer · 2015-06-05 16:49:36Z

11

I would suggest having just two selects, then changing the 2nd select based on what is selected in the first.

$('#typeOfGlass').on('change', function(){
    $('#glassWidth').html('');
    if($('#typeOfGlass').val()==15){
        $('#glassWidth').append('<option value="19">19</option>');
        $('#glassWidth').append('<option value="20">20</option>');
        $('#glassWidth').append('<option value="21">21</option>');
    }else{
        $('#glassWidth').append('<option value="6">6</option>');
        $('#glassWidth').append('<option value="7">7</option>');
        $('#glassWidth').append('<option value="8">8</option>');
        $('#glassWidth').append('<option value="9">9</option>');
    }
});

Here is a working example: https://jsfiddle.net/6hmpa1ax/

answered Jun 5, 2015 at 16:49

depperm

10.8k4 gold badges46 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wrxsti · Accepted Answer · 2015-06-05 16:52:42Z

As an alternative, if you don't want to dynamically change the DOM you can hide/show the premade markup. DEMO

HTML

<select id="typeOfGlass">
    <option selected disabled>Please select a glass type</option>
    <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select>
<br />

<div class="standard">
    <label>Glass Width for Standard:</label>
    <select id="glassWidthStandard">
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
    </select>
</div>
<div class="tempered">
    <label>Glass Width for Tempered:</label>
    <select id="glassWidthTempered">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</div>

jQuery

$('#typeOfGlass').on('change', function(){
    if( $(this).val() == 15 ){
        $('.tempered').hide();
        $('.standard').show();
    } else if( $(this).val() == 20 ){
        $('.standard').hide();
        $('.tempered').show();
    }
});

CSS

.standard, .tempered {
    display:none;
}

shreyansh · Accepted Answer · 2015-06-05 17:05:43Z

have a look at this code

<body  onLoad="fun('')">

<select id="typeOfGlass" onchange="fun(this.value)" >
 <option value=''>select</option>
  <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select><br/><br/>


    <select id="glassWidthStandard">
        <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
    </select>
    <select id="glassWidthTempered">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>


</body>
<script>
 function fun(val)
 {
  if(val==15)
  {
    $('#glassWidthTempered').hide();
    $('#glassWidthStandard').show();
  }
  else if(val==20)
  {
    $('#glassWidthStandard').hide();
    $('#glassWidthTempered').show();
  }
  else if(val=='')
  {
    $('#glassWidthStandard').hide();
    $('#glassWidthTempered').hide();
  }
 }
</script>

Collectives™ on Stack Overflow

how to change dropdowns values based on a selection of another dropdown using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related