lundi 13 mai 2019

Dependent Questions using Mike Tuupola's Chained with conditional 'If-Else'

This is a series of conditional questions with multiple parent questions. There is an additional question that is displayed only if the 'FeaturePhone' option is selected in the 1st question.

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>
</br>

<div id="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>
</br>

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>
</br>

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>
</select>

The questions's are 'Chained' (@miketuupola) and an conditional if-else is used to activiate the 'chained' events basis the option selected in the 1st question.

jQuery(document).ready(function($) {
jQuery("#PhoneType").on('change', function() {
    if ( this.value == "FeaturePhone")
      {
        jQuery("#FeaturePhone").show();
        jQuery("#FeaturePhoneFeature, #AllPhoneFeature, #SelectPhone").val(null).trigger('change');
        jQuery("#SelectPhone").chained("#PhoneType, #FeaturePhoneFeature, #AllPhoneFeature");
      }
      else
      {
        jQuery("#FeaturePhone").hide();
        jQuery("#AllPhoneFeature, #SelectPhone").val(null).trigger('change');
        jQuery("#SelectPhone").chained("#PhoneType, #AllPhoneFeature");
      }
    });
});

However, when I change my selection from 'Smartphone' to 'Featurephone' and re-select my conditional dropdowns, the last dropdown isn't populating.

Where am I going wrong? I've been struggling with this from quite sometime now unable to figure my error. Please help!!

Complete JS Fiddle: https://jsfiddle.net/tv96e3yp/

Aucun commentaire:

Enregistrer un commentaire