CODEWITHSUNDEEP
jquery
user1183255
user1183255

Reputation: 11

drop-down clone add and remove using jquery

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

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

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>

Upvotes: 0

Views: 1557

Answers (1)

codef0rmer
codef0rmer

Reputation: 10520

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');   
                }                      
            });
        });    
    } 
});​

Demo: http://jsfiddle.net/ZTF5J/2/

Upvotes: 1

Related Questions