Question

我尝试使用克隆方法创建基于下拉列表的搜索过滤器，下面我放置代码可以任何一个plz帮我修复问题。我创建了3个过滤搜索 - search1，search2，search3。默认情况下，我们有一个过滤搜索，我们有3个选项value1，valu2，value3，其中value1将被禁用，因为它的选定选项和其他2个选项值将在那里启用，这样我们就可以可以更改所选选项

添加更多点击添加更多过滤器我必须显示在上一个下拉列表中启用/可用的其他选项，如果我在第一次搜索中选择了value1，点击添加更多过滤器，我应该显示search2，其中value1为已禁用，值2已禁用

关闭选择功能我有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 个答案: