Это серия условных вопросов с несколькими родительскими вопросами.Существует дополнительный вопрос, который отображается, только если в первом вопросе выбрана опция «FeaturePhone».
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>
Вопросы «Цепные» (@miketuupola) и условные if-else используются дляактивируйте «цепочку» событий на основе опции, выбранной в 1-м вопросе.
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");
}
});
});
Однако, когда я изменяю свой выбор с «Смартфон» на «Featurephone» и повторно выбираю мои условные выпадающие списки, последний выпадающий список не заполняется.
Куда я иду не так?Я боролся с этим с недавних пор, не в состоянии понять мою ошибку.Пожалуйста, помогите !!
Полная скрипка JS: https://jsfiddle.net/tv96e3yp/