CODEWITHSUNDEEP
jqueryselectdrop-down-menu
Mithun Uchil
Mithun Uchil

Reputation: 347

How to Refresh/reload Select dropdown options

I have 3 Dropdown menus linked to each other (Brand,Parameter,SubBrands). The third dropdown menu's ("Subbrands") options should be basis the option selected in the first menu (Brand).

The jquery for this part is as below:

jQuery("#Brand, #Parameter").on('change', function () {
    jQuery("#SubBrands").val(null).trigger('change');
      if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
      }
      if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
        jQuery ('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
      }
      $("#SubBrands").val([]);
    });

While the respective 'SubBrands' are being hidden as required, when I change the main 'Brand' and relook at the 'SubBrand' dropdown, the previous hidden 'SubBrand' does not reappear. I need this menu to refresh everytime the main 'Brand' selection changes.

The whole working code is as below:

jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
    }
    $("#SubBrands").val([]);
  });

});
.hide {
  display: none
}

</style></head><body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

Upvotes: 0

Views: 3078

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

I guess you're better off having a filter button or something. I'd say a Hide or Show button along with this. Keep an object or something that tracks everything.

Your second <select> should be an action select. This needs to get updated or show the current source of truth. See the below example:

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>

Here we have got a connected component right now with a mini-config. Now based on this change - we need to show or hide the products:

var config = {
  "brand-A": "show",
  "brand-B": "hide",
  "brand-C": "hide"
};

Now coming to the show action, we write this way:

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    $("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
    $("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
    $("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");
  });
});

This gives us with what you need:

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    $("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
    $("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
    $("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");
  });
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

You can also make this in a better way, by using the Object.keys, replacing the following:

$("#products option.brand-A").prop("hidden", config["brand-A"] === "hide");
$("#products option.brand-B").prop("hidden", config["brand-B"] === "hide");
$("#products option.brand-C").prop("hidden", config["brand-C"] === "hide");

with this:

Object.keys(config).forEach(function (br) {
  $("#products option." + br).prop("hidden", config[br] === "hide");
});

Here's your final snippet:

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    Object.keys(config).forEach(function (br) {
      $("#products option." + br).prop("hidden", config[br] === "hide");
    });
  });
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

Another representation:

var config = {
  "brand-A": "hide",
  "brand-B": "hide",
  "brand-C": "hide"
};
$(function () {
  $("#brand").change(function () {
    $("#show").val(config[$(this).val()]).prop("disabled", false);
  });
  $("#show").change(function () {
    $brand = $("#brand").val();
    config[$brand] = $(this).val();
    // Hide all the products:
    $("#products option").not(":first").prop("hidden", true);
    Object.keys(config).forEach(function (br) {
      $("#products option." + br).prop("hidden", config[br] === "hide");
    });
  });
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Choose a brand:
<select id="brand">
  <option value="" disabled selected></option>
  <option value="brand-A">Brand A</option>
  <option value="brand-B">Brand B</option>
  <option value="brand-C">Brand C</option>
</select>
<br />
Show or Hide:
<select id="show" disabled="disabled">
  <option value="" disabled selected></option>
  <option value="show">Show</option>
  <option value="hide">Hide</option>
</select>
<br />
List of Products:
<select id="products" size="10" style="width: 100px;">
  <option value="" disabled selected></option>
  <option hidden="hidden" class="brand-A" value="product-A-1">Product A-1</option>
  <option hidden="hidden" class="brand-A" value="product-A-2">Product A-2</option>
  <option hidden="hidden" class="brand-A" value="product-A-3">Product A-3</option>
  <option hidden="hidden" class="brand-B" value="product-B-1">Product B-1</option>
  <option hidden="hidden" class="brand-B" value="product-B-2">Product B-2</option>
  <option hidden="hidden" class="brand-B" value="product-B-3">Product B-3</option>
  <option hidden="hidden" class="brand-C" value="product-C-1">Product C-1</option>
  <option hidden="hidden" class="brand-C" value="product-C-2">Product C-2</option>
  <option hidden="hidden" class="brand-C" value="product-C-3">Product C-3</option>
</select>
<p hidden="hidden">You have selected <strong></strong></p>

Hope this helps. 🔥

Upvotes: 2

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You need to show all options first then hide the specific one:

jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    
    // Show all options here
    jQuery('#SubBrands option').show();
    
    if ($("#Brand").val() == 'Brand1' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand1Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand2' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand2Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand3' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand3Hide"]').hide();
    }
    if ($("#Brand").val() == 'Brand4' && $("#Parameter").val() == 'ShowBrands') {
      jQuery('#SubBrands option').filter('option[value="SubBrand4Hide"]').hide();
    }
    $("#SubBrands").val([]);
  });

});
.hide {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

And the below snippet is some refactor I made. It shorten your condition:

jQuery('#SubBrands option').show();
if ($("#Parameter").val() == 'ShowBrands') {
  let branch = $("#Brand").val();
  jQuery('#SubBrands option').filter(`option[value="Sub${branch}Hide"]`).hide()
}


jQuery(document).ready(function($) {
  jQuery("#Parameter").on('change', function() {
    if (this.value == "ShowBrands") {
      $("#SubBrandBox").show();
    } else {
      $("#SubBrandBox").hide();
    }
  });
  jQuery("#Brand, #Parameter").on('change', function() {
    jQuery("#SubBrands").val(null).trigger('change');
    
    jQuery('#SubBrands option').show();
    if ($("#Parameter").val() == 'ShowBrands') {
      let branch = $("#Brand").val();
      jQuery('#SubBrands option').filter(`option[value="Sub${branch}Hide"]`).hide()
    }
    
    $("#SubBrands").val([]);
  });

});
.hide {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>

  Which Brand:
  <select id="Brand">
    <option></option>
    <option value="Brand1">Brand1</option>
    <option value="Brand2">Brand2</option>
    <option value="Brand3">Brand3</option>
    <option value="Brand4">Brand4</option>
  </select>
  </br>
  Parameter
  <select id="Parameter">
    <option></option>
    <option value="ShowBrands">Show Sub-Brands</option>
    <option value="HideBrands">Hide Sub-Brands</option>
  </select>
  </br>
  <div id="SubBrandBox" style="display: none;">
    Sub-Brands
    <select id="SubBrands">
      <option></option>
      <option value="SubBrand1Hide">AAAA</option>
      <option value="SubBrand2Hide">BBBB</option>
      <option value="SubBrand3Hide">CCCC</option>
      <option value="SubBrand4Hide">DDDD</option>
    </select>
  </div>
</body>

Upvotes: 1

Related Questions