CODEWITHSUNDEEP
jquery
Tasos
Tasos

Reputation: 7587

Default selected value on select are not visible when change value dynamically

I have 3 select dropdowns where 2nd and 3rd are depended on the choice of the 1st dropdown.

Each of them has a default choice to show when the page loads. I managed to make it work, so the 2nd and 3rd dropdowns will change options based on the first one, however, those two stays empty on load even if the first choice is selected when you click on them.

HTML

<div id="additional-number-options-284">
  <select class="form-control" id="select-additional-number-country-284">
    <option disabled="disabled" selected="selected">Select a country</option>
    <option value="7818">Country 1</option>
    <option value="7814">Country 2</option>
  </select>
  <select id="select-additional-number-state-284">
    <option disabled="disabled" selected="selected">Select a state</option>
    <option data-product="7818" value="65">State 4</option>
    <option data-product="7818" value="66">State 5</option>
    <option data-product="7814" value="62">State 1</option>
    <option data-product="7814" value="63">State 2</option>
    <option data-product="7814" value="64">State 3</option>
  </select>
  <select id="select-additional-number-plan-284">
    <option disabled="disabled" selected="selected">Select a plan</option>
    <option data-product="7818" value="7819">Plan D (+$5.00)</option>
    <option data-product="7818" value="7820">Plan E (+$15.00)</option>
    <option data-product="7814" value="7815">Plan A (+$10.00)</option>
    <option data-product="7814" value="7816">Plan B (+$8.00)</option>
    <option data-product="7814" value="7817">Plan C (+$12.00)</option>
  </select>
</div>

jQuery

jQuery("[id^=select-additional-number-country-]").change(function() {
  var id = this.id.split('-').pop();
  jQuery("#select-additional-number-state-" + id)
    .find("option")
    .show()
    .not("option:first, option[data-product='" + this.value + "']")
    .hide();

  jQuery("#select-additional-number-state-" + id).val(
    jQuery("#select-additional-number-state" + id).find("option:visible:first").val());

  jQuery("#select-additional-number-plan-" + id)
    .find("option")
    .show()
    .not("option:first, option[data-product='" + this.value + "']")
    .hide();

  jQuery("#select-additional-number-plan-" + id).val(
    jQuery("#select-additional-number-plan" + id).find("option:visible:first").val());

}).change();

JSFiddle code

Upvotes: 1

Views: 39

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337701

The issue is because your attribute begins with selector is invalid. You need to wrap the value in quotes as the - will not be interpreted correctly. Try this:

jQuery(function($) {
  $('[id^="select-additional-number-country-"]').change(function() {
    var id = this.id.split('-').pop();
    $("#select-additional-number-state-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();
    $("#select-additional-number-plan-" + id).val('').find("option").show().not("option:first, option[data-product='" + this.value + "']").hide();
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="additional-number-options-284">
  <select class="form-control" id="select-additional-number-country-284">
    <option disabled="disabled" selected="selected">Select a country</option>
    <option value="7818">Country 1</option>
    <option value="7814">Country 2</option>
  </select>
  <select id="select-additional-number-state-284">
    <option disabled="disabled" selected="selected" value="">Select a state</option>
    <option data-product="7818" value="65">State 4</option>
    <option data-product="7818" value="66">State 5</option>
    <option data-product="7814" value="62">State 1</option>
    <option data-product="7814" value="63">State 2</option>
    <option data-product="7814" value="64">State 3</option>
  </select>
  <select id="select-additional-number-plan-284">
    <option disabled="disabled" selected="selected" value="">Select a plan</option>
    <option data-product="7818" value="7819">Plan D (+$5.00)</option>
    <option data-product="7818" value="7820">Plan E (+$15.00)</option>
    <option data-product="7814" value="7815">Plan A (+$10.00)</option>
    <option data-product="7814" value="7816">Plan B (+$8.00)</option>
    <option data-product="7814" value="7817">Plan C (+$12.00)</option>
  </select>
</div>

Two other things to note here. Firstly the use of the aliased $ parameter of the document.ready event handler. This allows you to use $ instead of the verbose jQuery within the scope of the function.

Secondly your convoluted use of val() was not required. You can simply call val('') to reset the selected option when a dependant select is changed.

Upvotes: 2

Related Questions