Привет всем, это мой первый пост здесь.
У меня есть 4 поля выбора местоположения с такими параметрами, как «полный сундук», «полная спина», «передний левый сундук», «передний правый сундук» и т. д., а также 4 цветных поля, в которых указано количество цветов.
Я показываю поле выбора первого местоположения и один цвет по умолчанию и увеличиваю их, используя кнопку «Добавить еще одно местоположение» или удаляя их с помощью кнопки «Удалить местоположение». Я также сбрасываю поле выбора определенного местоположения и его цвет, если это местоположение удалено.
Также, если в одном из полей выбора выбран один параметр, этот параметр должен быть отключен в остальных трех полях выбора. (у меня эта часть работает)
Теперь, если в любом из полей выбора выбран полный сундук, то передний левый сундук и передний правый сундук должны быть отключены в оставшихся трех полях выбора. (эта часть не работает)
Кроме того, когда я удаляю местоположение и сбрасываю это значение местоположения, мне трудно повторно включить отключенную опцию из других полей местоположения или местоположения по умолчанию.
Вот JSFIDDLE ( https://jsfiddle.net/booq3ota/ )
Вот мой HTML-код и CSS:
Код (разметка): КОД jQUERY:
Код (разметка):
Спасибо и ценю это.
У меня есть 4 поля выбора местоположения с такими параметрами, как «полный сундук», «полная спина», «передний левый сундук», «передний правый сундук» и т. д., а также 4 цветных поля, в которых указано количество цветов.
Я показываю поле выбора первого местоположения и один цвет по умолчанию и увеличиваю их, используя кнопку «Добавить еще одно местоположение» или удаляя их с помощью кнопки «Удалить местоположение». Я также сбрасываю поле выбора определенного местоположения и его цвет, если это местоположение удалено.
Также, если в одном из полей выбора выбран один параметр, этот параметр должен быть отключен в остальных трех полях выбора. (у меня эта часть работает)
Теперь, если в любом из полей выбора выбран полный сундук, то передний левый сундук и передний правый сундук должны быть отключены в оставшихся трех полях выбора. (эта часть не работает)
Кроме того, когда я удаляю местоположение и сбрасываю это значение местоположения, мне трудно повторно включить отключенную опцию из других полей местоположения или местоположения по умолчанию.
Вот JSFIDDLE ( https://jsfiddle.net/booq3ota/ )
Вот мой HTML-код и CSS:
Код:
var i = 1;
$(".addonemore").click(function(){ if( i > 3){ alert("You can add only a maximum of 4 locations"); } else { i++; $('.location-'+i).css({'display':'table'}); }
});
$(".rmone").click(function(){ if( i < 2){ alert("You need at least one location and color"); } else { $('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'}); i--; }
}); $('select[name*="location"]').change(function() { var selectedOptions = $('select option:selected'); $('select option').removeAttr('disabled'); selectedOptions.each(function() { var value = this.value; if (value !== ''){ var id = $(this).parent('select[name*="location"]').prop('id'); var options = $('select[name*="location"]:not(#' + id + ') option[value=' + value + ']'); options.prop('disabled', 'true'); } });
});Код (разметка): КОД jQUERY:
<div class="pc-row location-1"> <div class="locations-colors pc-col quote-sizes"> <h4>Choose location below</h4> <label for="location_one"><span>Location</span> <select name="location_one" id="location_one" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <h4>Choose number of colors for location</h4> <label for="color_one"><span>Number of Colors</span> <select name="color_one" id="color_one"> <option value="">choose colors</option> <option value="0">One Color</option> <option value="1">Two Colors</option> <option value="2">Three Colors</option> <option value="3">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-2"> <div class="locations-colors pc-col quote-sizes"> <label for="location_two"><span>Location</span> <select name="location_two" id="location_two" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_two"><span>Number of Colors</span> <select name="color_two" id="color_two"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-3"> <div class="locations-colors pc-col quote-sizes"> <label for="location_three"><span>Location</span> <select name="location_three" id="location_three" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_three"><span>Number of Colors</span> <select name="color_three" id="color_three"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div> <div class="pc-row location-4"> <div class="locations-colors pc-col quote-sizes"> <label for="locatio_four"><span>Location</span> <select name="location_four" id="location_four" class="linked-drop-down"> <option value="">choose location</option> <option value="Full_Chest">Full Chest</option> <option value="Full_Back">Full Back</option> <option value="Front_Left_Chest">Front Left Chest</option> <option value="Front_Right_Chest">Front Right Chest</option> <option value="Left_Sleeve">Left Sleeve</option> <option value="Right_Sleeve">Right Sleeve</option> </select></label> </div> <div class="locations-colors pc-col quote-sizes"> <label for="color_four"><span>Number of Colors</span> <select name="color_four" id="color_four"> <option value="">choose colors</option> <option value="1">One Color</option> <option value="2">Two Colors</option> <option value="3">Three Colors</option> <option value="4">Four Colors</option> </select></label> </div> </div><br /> <div class="pc-row"> <div class="pc-col"> <div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div> <div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div> </div> </div> .pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top} .location-2,.location-3,.location-4{display:none}#add-location,#rm-location{margin:20px 0;width:160px;float:left}#rm-location{width:auto}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px} Код (разметка):
Спасибо и ценю это.
