show/hide options in drop down using jquery

Question

I have two drop down boxes.

<select id="brand">
<option id="20">Honda</option>
<option id="22">Maruti</option>
</select>

<select id="model">
<option id="50">City</option>
<option id="51">Alto</option>
<option id="52">Amaze</option>
<option id="53">Civic</option>
<option id="54">Swift</option>
<option id="55">Ritz</option>
</select>

Depending on the brand selected I have to load the model drop down with appropriated values. If user select Honda from brand then the model drop down should only contain(display) City, Amaze, and Civic values.

Since the option id are dynamically created I can't access the option via its id.There is no need to add new options, because all options are there. So I only need to show/hide options in model drop down.

I am confused because I can't access the option via its id(they are dynamically created), I can only access by its text.

How can I do this?? Please help me...

IDs must be unique on document context, this is invalid HTML markup. Use instead `data-*` attribute, e.g, `data-id`. But then, if you want to target specifically `Alto` option, how would you avoid to target `Ritz` too? That's not clear! So reading your question again, use a `data-model` common for each car model and filter using that — A. Wolff, Jun 01 '15 at 11:00
this will help you . you need to add span as parent of options then it will work on IE. http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Nishit Maheta, Jun 01 '15 at 11:05
@A.Wolff yes you are rite . i just suggest if want to hide options then it will not work in IE browser. we need to use invalid HTML for IE browser. you suggestion correct . — Nishit Maheta, Jun 01 '15 at 11:13
Somehow, somewhere on the server, hopefully in a database, you have some kind of relationship between the brand(s) and the model(s). Therefore it would be wise to create a script returning a model list when it's given a brand name or id, and then use AJAX to call that script and rebuild the models list each time a change occurs in the brand dropdown (user selects another brand). If you don't want to use AJAX, I would suggest to populate the models dropdown with all models but add a a data-attribute linking it to the brand, allowing you to target it with a CSS selector. — Laurent S., Jun 01 '15 at 11:14

score 3 · Answer 1 · answered Jun 01 '15 at 11:22

3

Try this Demo

$('#brand').change(function() {    
    var brandValue = $(this).val();
    if(brandValue == "Honda") {
        $("#model option[id='50']").show();        
    }        
})

answered Jun 01 '15 at 11:22

stanze

2,456
10
13

I can't use id of options because id is dynamically created. – user3847937 Jun 01 '15 at 11:26

Siamak Ferdos · Answer 2 · 2015-06-01T11:09:04.680

0

if your select ID is static always you can:

$("#model").find("option[id='50']").hide();

However you shouldn't has multiple Id. use another attribute instead of it.

edited Jun 01 '15 at 11:09

answered Jun 01 '15 at 11:02

Siamak Ferdos

3,181
5
29
56

option id are dynamically created – FrancoisBaveye Jun 01 '15 at 11:03

score 0 · Answer 3 · answered Jun 01 '15 at 11:07

You have to use text() in order to get the content of the options :

// When the selected value of brand changes
$('#brand').change(function(){
    // Loop through each option from model
    $('#model option').each(function(){
        // If you chose Honda
        if ($('#brand option:selected').text() == 'Honda')
        {
            // If the option is City, Amaze or Civic, show it
            if ($.inArray($(this).text(), ['City', 'Amaze', 'Civic']))
                $(this).show();
            // If not, hide it
            else
                $(this).hide();
        }
        // You chose Maruti
        else
        {
            // You didn't specify what to do in this case si I guess you want to show all
            $(this).show();
        }
    });
});

Be careful, you have the same id several times in the code (50 and 51). This is invalid.

score 0 · Answer 4 · edited Jun 01 '15 at 11:29

0

You can use jQuery hide() and show() functions to achieve the same.

Below is the code block for your reference.

 <script>
    $(document).ready(function () {
        $("select[Title='Status']").find('option:contains("Open")').hide();         
    });
 </script>

edited Jun 01 '15 at 11:29

nikc.org

16,462
6
50
83

answered Jun 01 '15 at 11:09

Bhushan Narkhede

101
2
10

score 0 · Answer 5 · answered Jun 01 '15 at 11:52

var hondaModels = [
  "City",
  "Amaze",
  "Civic"
];

var marutiModels = [
  "Alto",
  "Swift",
  "Ritz"
];

var updateModelList = function(){
  $("#model").find("option").hide();
  var model = $("#brand").val().toLowerCase();
  switch(model){
    case "honda" :
      hondaModels.forEach(function(model){
        $("#model").find("option:contains(" +model +")").show();
      });
      $("#model").val("City");
      break;
    case "maruti" :
       marutiModels.forEach(function(model){
        $("#model").find("option:contains(" +model +")").show();
      });
      $("#model").val("Alto");
      break;
    default : 
     return false;
  }
  
};

updateModelList();

$("#brand").on("change", function(){
  updateModelList();
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <select id="brand">
    <option id="20">Honda</option>
    <option id="22">Maruti</option>
  </select>
  
  <select id="model">
    <option id="50">City</option>
    <option id="51">Alto</option>
    <option id="50">Amaze</option>
    <option id="51">Civic</option>
    <option id="50">Swift</option>
    <option id="51">Ritz</option>
  </select>
</body>
</html>

Here I search for text nodes of option and show them using array to stores models for particular brand.

show/hide options in drop down using jquery

5 Answers5