Using jQuery Chained plugin on multiple-dropdowns with a conditional if-else

I’m using @MikaTuupola 's ‘Chained’ plugin to build dependent drop-downs.

<div>
What kind of Phone are you looking for:
<select id="PhoneType">
        <option></option>
        <option value="Smartphone">Smartphones</option> 
        <option value="FeaturePhone">Feature phones</option> 
</select>
</div>
<div id="FeaturePhone" value="FeaturePhone" style="display: none;">
Which are you looking for in a Featurephone?:
<select id="FeaturePhoneFeature">
        <option></option>
        <option value="Durability" class="FeaturePhone">Durability</option> 
        <option value="BatteryLife" class="FeaturePhone">Battery Life</option>
        <option value="EaseOfUse" class="FeaturePhone">Ease of Use</option>
</select>
</div>
<div>
Features in the Smart/Feature phone you are looking for:
<select id="AllPhoneFeature">
        <option></option>
        <option value="Camera" Class="FeaturePhone Smartphone">Camera</option>
        <option value="InternalMemory" Class="FeaturePhone Smartphone">Internal Memory</option>
        <option value="Speaker" Class="FeaturePhone Smartphone">Speaker</option> 
</select>
</div>
<div>
Select Phone:
<select id="SelectPhone" multiple="multiple">
    <option class=Smartphone\Camera value="AppleIPhone">Apple IPhone</option>
    <option class=Smartphone\Speaker value="SamsungGalaxy">Samsung Galaxy</option>
    <option class=Smartphone\InternalMemory value="PocoF1">PocoF1</option>
    <option class=FeaturePhone\Durability\Speaker value="NokiaN34">'Nokia N34</option>
    <option class=FeaturePhone\Durability\Camera value="SonyEricsson334">SonyEricsson334</option>
    <option class=FeaturePhone\EaseOfUse\Camera value="Motorola">Motorola</option>
    <option class=FeaturePhone\BatteryLife\Speaker value="SonyEricssonV2">SonyEricssonV2</option>
</div>

The problem is however, when I introduce a conditional if-else which shows/hides the ‘feature-phone features’ div only if the ‘feature-phone’ option is selected in the first question.

jQuery("#PhoneType").on('change', function() {
    if ( this.value == "FeaturePhone")
      {
        jQuery("#PhoneType, #FeaturePhone, #FeaturePhoneFeature, #AllPhoneFeature, #SelectPhone").off('chained');
        jQuery("#FeaturePhone").show();
        jQuery("#FeaturePhoneFeature").chained("#PhoneType");
        jQuery("#AllPhoneFeature").chained("#PhoneType");
        jQuery("#SelectPhone").chained("#PhoneType, #FeaturePhoneFeature, #AllPhoneFeature");
      }
      else
      {
        jQuery("#PhoneType, #FeaturePhone, #FeaturePhoneFeature, #AllPhoneFeature, #SelectPhone").off('chained');
        jQuery("#FeaturePhone").hide();
        jQuery("#AllPhoneFeature").chained("#PhoneType");
        jQuery("#SelectPhone").chained("#PhoneType, #AllPhoneFeature");
      }
    });
});

Selecting the ‘Feature-phone’ option and re-selecting the other drop-downs gives a ‘no-result-found’ in my last dropdown. However, refreshing the page and starting with ‘feature-phones’ populates the last dropdown.

I have tried to introduce the ‘unbind’ methold to remove the previous chain and introduce the new chain for both the options in the ‘if-else’ but this also isn’t working

The JS fiddle has the complete code: https://jsfiddle.net/gpufedno/1/

From where are you getting your chained code? Your implementation doesn’t look correct for the examples given.

Hi!! Thanks for the quick reply! For some reason, the ‘class’ instead of ‘data-chained’ seems to work for the plugin for which the CDN is available. (Got the ‘class’ using code from here: https://www.jqueryscript.net/form/Simple-jQuery-Plugin-For-Chained-Selects-Chained.html). But the approach remains the same. Also the plugin works fine except when I’m introducing a ‘if-else’ condition.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.