CODEWITHSUNDEEP
javascriptjqueryhtml
User123
User123

Reputation: 5

hide dropdown option on change of another dropdown option

I have tried this, but not working fine. HTML:

 <div>
 <select id="color" name="color" onchange="myFunction()">                
    <option value=""> choose options </option>                
    <option value="1">AB</option>
    <option value="2">ABC</option>
    <option value="3">ABCD</option>
</select>
<select id="size" name="size" >             
    <option value=""> choose options </option>
    <option value="3" class="27">Apple </option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="3" class="28">Grapes</option>
</select>
</div>

SCRIPT:

function myFunction()
{
   $variable=$("#size").html();
   $("#size").html($variable); 
   var val=$("#color").find(":selected").val();
   $("#size option[value!="+val+"]").remove();
}

in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

Upvotes: 0

Views: 3831

Answers (2)

Joel Almeida
Joel Almeida

Reputation: 8037

You can make a mix of JS and CSS.

So we "reset" the size select, by removing all the disabled and also the selected.

Something like this: 

$(document).ready(function () {
    var colors = $('#color'),
        size = $('#size');
    
    colors.change(function () {
        var val = $(this).find(":selected").val();
        size.find('option').removeAttr('disabled');
        size.find('option:selected').removeAttr('selected');
        size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
    })

})
option:disabled {
    display: none;
}

option:first-child {
    display: block;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select id="color" name="color">
        <option value="">choose options</option>
        <option value="1">AB</option>
        <option value="2">ABC</option>
        <option value="3">ABCD</option>
    </select>
    <select id="size" name="size">
        <option value="">choose options</option>
        <option value="3" class="27">Apple</option>
        <option value="2" class="26">Orange</option>
        <option value="2" class="26">Orange</option>
        <option value="2" class="26">Orange</option>
        <option value="3" class="28">Grapes</option>
    </select>
</div>

Edit 1:

Using data-group instead of class or value

$(document).ready(function () {
    var colors = $('#color'),
        size = $('#size');
    
    colors.change(function () {
        var val = $(this).find(":selected").attr('data-group');
        size.find('option').removeAttr('disabled');
        size.find('option:selected').removeAttr('selected');
        size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
    })

})
option:disabled {
    display: none;
}

option:first-child {
    display: block;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select id="color" name="color">
        <option value="">choose options</option>
        <option value="1" data-group="1">AB</option>
        <option value="2" data-group="2">ABC</option>
        <option value="3" data-group="3">ABCD</option>
    </select>
    <select id="size" name="size">
        <option value="">choose options</option>
        <option value="3" class="27" data-group="3">Apple</option>
        <option value="2" class="26" data-group="2">Orange</option>
        <option value="2" class="26" data-group="2">Orange</option>
        <option value="2" class="26" data-group="2">Orange</option>
        <option value="3" class="28" data-group="3">Grapes</option>
    </select>
</div>

Upvotes: 1

Sa Si Kumar
Sa Si Kumar

Reputation: 662

You should show all options before hide.

function myFunction()
{
   $variable=$("#size").html();
   $("#size").html($variable); 
   var val=$("#color").find(":selected").val();
    $("#size option").show();
   $("#size option[value!="+val+"]").hide();
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
 <select id="color" name="color" onchange="myFunction()">                
    <option value=""> choose options </option>                
    <option value="1">AB</option>
    <option value="2">ABC</option>
    <option value="3">ABCD</option>
</select>
<select id="size" name="size" >             
    <option value=""> choose options </option>
    <option value="3" class="27">Apple </option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="2" class="26">Orange</option>
    <option value="3" class="28">Grapes</option>
</select>
</div>

Upvotes: 2

Related Questions