下拉克隆使用jQuery添加和删除 [英] drop-down clone add and remove using jquery
问题描述
我正在尝试使用克隆方法基于下拉列表创建搜索过滤器，下面我放置了代码可以帮助任何人解决这个问题.我创建了3个过滤器搜索-search1，search2，search3. 默认情况下，一个过滤器搜索将可用，因为我们有3个选项value1，value2，value3，其中value1将由于其选定选项而被禁用，而其他2个选项则处于启用状态，因此我们 可以更改选择的选项
Im trying create search filter based on drop down using clone method, below i have place the code can any one plz help me fixing the problem.i have create 3 filter search - search1,search2,search3. by default one filter search will be available in that we have 3 options value1,valu2,value3 where value1 will be disabled since its selected option and other 2 options value will be there as enabled so that we can change the selected options
添加更多 在单击添加更多过滤器时，我必须显示其他选项，这些选项在上一个下拉列表中是启用/可用的，即，如果我在第一次搜索中选择了value1，则在单击添加更多过滤器时，我应将search2与value1一起显示为 已禁用，value2已禁用
add more on click of add more filter i have to display other options which are enable/available in the previous drop down i,e if i have selected value1 in my first search , on click of add more filter , i should display search2 with value1 as disabled and value2 as disabled
关闭选择功能 我有3个搜索，其中所有选项现在都已禁用，如果我单击关闭，则在搜索2中选择它应该隐藏/删除search2过滤器并添加更多过滤器 并且应该在其他搜索中启用该选项，以便我可以更改其他搜索中的选项
close select function i have 3 search with all options which are disabled now if i click close select in search 2 its should hide/remove the search2 filter and add more filter should be appear and option should be enable on other searches so that i can change the options in the other searches
<html>
<head>
<body >
<form name="search" method="post" action="sample1.php">
<div class="js-selectblock">
<div class="js-select">
<select name="select2[]" class="mySelect" >
<option value="1" selected="selected" > Search1</option>
<option value="2" >Search2</option>
<option value="3" >Search3</option>
</select>
<span class="close select">X</span>
</div>
</div>
<input type="submit" value="submit">
<div id="add more">
Add another filter
</div>
</form>
<script type='text/java script' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/java script'>//<![C DATA[
$(function(){
$('#add more')click(function(){
if($('.close select').length < $('.js-select:first option').length )
{
$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');
$('.mySelect:last option').removeAttr('selected').filter(':not(:disabled):first').attr('selected','selected');
var mySelect = $('.mySelect');
$('.mySelect option:selected').each(function(){
//alert(mySelect.find('option[value="'+$(this).val()+'"]'));
// mySelect.find('option[value="'+$(this).val()+'"]').attr('disabled','disabled');
mySelect.find ('option[value=' + $(this).val() + ']').attr('disabled', true);
});
}
if($('.closeselect').length >= $('.js-select:first option').length )
{
$('#addmore').hide();
}
});
$('.closeselect').live('click',function(){
if($('.closeselect').length >1)
{
$(this).parent().remove();
var SelectedValue = $(this).parent().children('select').val();
$('.js-selectblock option[value="'+SelectedValue+'"]').removeAttr('disabled');
$('#addmore').show();
}
});
});
</script>
</body>
</html>
推荐答案
我已经更新了代码，并使其更加防弹.
I've updated the code and I made it more bulletproof.
$(function(){
$('#addmore').click(function(){
if($('.closeselect').length < $('.js-select:first option').length) {
$('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');
$('.mySelect:not(:last) > option:selected').each(function () {
var disableOption = $(this).val();
$('.mySelect:last > option').each (function () {
if (disableOption === $(this).val()) {
$(this).attr('disabled', 'disabled');
}
});
});
$('.mySelect:last > option:not(:disabled):first').attr('selected', 'selected');
disableSelectedOption();
}
if($('.closeselect').length >= $('.js-select:first option').length) {
$('#addmore').hide();
}
});
$('.closeselect').live('click',function(){
if($('.closeselect').length > 1) {
$(this).parent().remove();
disableSelectedOption();
$('#addmore').show();
}
});
$('.mySelect').live('change', function () {
disableSelectedOption();
});
function disableSelectedOption() {
$('.mySelect > option').each(function () {
$(this).removeAttr('disabled');
});
$('.mySelect > option:selected').each(function () {
var disableOption = $(this).val();
$('.mySelect > option:not(:selected)').each (function () {
if (disableOption === $(this).val()) {
$(this).attr('disabled', 'disabled');
}
});
});
}
});
演示: http://jsfiddle.net/ZTF5J/2/
这篇关于下拉克隆使用jQuery添加和删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
