下拉克隆使用jQuery添加和删除

Question

我正在尝试使用克隆方法基于下拉列表创建搜索过滤器，下面我放置了代码可以任何一个帮助我解决问题。我创建了3个过滤器搜索-search1，search2，search3。默认情况下，一个过滤器搜索将可用，因为我们有3个选项value1，value2，value3，其中value1将由于其选定选项而被禁用，而其他2个选项的值将处于启用状态，以便我们可以更改选定的选项

点击添加更多过滤器添加更多内容，我必须显示其他选项，这些选项在上一个下拉列表中是启用/可用的，即如果我在第一次搜索中选择了value1，点击添加更多过滤器，则应显示带有value1的search2禁用，value2禁用

关闭选择功能我有3个搜索，所有选项现在都被禁用，如果我单击关闭在搜索2中选择，它应该隐藏/删除search2过滤器并应添加更多过滤器，并且应该在其他搜索上启用该选项，以便我可以更改其他搜索中的选项

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

Answer 1

我已经更新了代码，并使其更加防弹。

$(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添加和删除

问题描述

1 个解决方案

解决方案1
1 2012-03-18 07:46:58

下拉克隆使用jQuery添加和删除

问题描述

1 个解决方案

解决方案1 1 2012-03-18 07:46:58

解决方案1
1 2012-03-18 07:46:58