liste déroulante append et supprimer en utilisant jquery

J’essaie de créer un filtre de recherche basé sur une liste déroulante à l’aide de la méthode de clonage. Ci-dessous, j’ai placé le code qui peut m’aider à résoudre le problème. J’ai créé 3 filtres de recherche – search1, search2, search3. Par défaut, une recherche par filtre sera disponible dans la mesure où nous avons 3 options value1, valu2, value3, où valeur1 sera désactivé car son option sélectionnée et les 2 autres options seront toujours activées afin que nous puissions modifier les options sélectionnées.

append plus sur cliquer sur append plus filtre je dois afficher d’autres options qui sont activer / disponible dans la liste déroulante précédente i, e si j’ai sélectionné value1 dans ma première recherche, en cliquant sur append plus de filtre, je devrais afficher search2 avec valeur1 comme désactivé et valeur2 comme désactivé

fermer sélectionner fonction j’ai 3 recherche avec toutes les options qui sont désactivés maintenant si je clique fermer sélectionner dans recherche 2 son doit masquer / supprimer le filtre search2 et append plus de filtre doit apparaître et option doit être activé sur les autres recherches afin que je puisse changer les options dans les autres recherches

        Search1 Search2 Search3  X 
 
   Add another filter 
 
  //<![C DATA[ $(function(){ $('#add more')click(function(){ if($('.close select').length  .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(); } }); });

J’ai mis à jour le code et je l’ai rendu plus résistant aux balles.

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

Démo: http://jsfiddle.net/ZTF5J/2/