Множественный выбор в JQuery

Question

Я пытаюсь написать код JQuery, который работает таким образом:

Когда страница загружена, она представляет только одно поле.

При выборе опции из этого поля открывается новое поле, и опция должна быть полностью первой, кроме выбранной опции. И так далее, и для другого созданного.

jsfiddle показан here

var globalObj = {}; 
var selectedObj = {}; 
var unselectedObj = {}; 
var currentSelection = ""; 

function deleteByVal(obj,val) { 
    for (var key in obj) { 
     if (obj[key] == val) delete obj[key]; 
    } 
} 

$(document).ready(function() { 
    $(document).on('click', 'target', function(){ 
     var curSelected = $(this).find(":selected").text(); 
    }); 

    $("#select1").one('click',function(){ 
     $(this).children().each(function() { 
     globalObj[this.value] = this.innerHTML; 
    }); 
     unselectedObj = globalObj; 
     }); 

    $(document).on('change', '.prova > .target', function() { 
     $('div').removeClass('prova'); 

     var $mySelect = $('<select>', { 
      class: 'target' 
     }); 

    var selectedValue = $(this).find(":selected").text(); 

    var found = 0; 
    $.each(selectedObj, function (val, text) { 

      if (val === selectedValue) { 
      found++; 
     } 
     }); 
    if (found===0) { 
     selectedObj[this.value] = selectedValue; 
     deleteByVal(unselectedObj,selectedValue); 
    } 

     console.log(selectedValue); 
    console.log(selectedObj); 
    console.log(unselectedObj); 

    var obj = {}; //create an object 
    $(this).children().each(function() { 
     if (this.innerHTML!=selectedValue) { 
     //code 
     obj[this.value] = this.innerHTML; 
    } 
    }); 
    console.log("Questo rappresenta obj:"); 
    console.log(obj); 
    console.log("stampa obj conclusa"); 


    $("select").not(this).each(function(index) { 
      var temp = {}; //create an object 
     $(this).children().each(function() { 
      if (this.innerHTML === selectedValue) { 
     console.log("eliminazione"); 
     $(this).remove(); 
      } 
     }); 

     $this = $(this); 
     console.log("stampa temp"); 
     console.log(temp); 
     console.log("fine stampa temp"); 
    }); 


     $.each(unselectedObj, function (val, text) { 
      $mySelect.append($('<option />', { 
       value: val, 
       text: text 
      })); 
     }); 



     var $input = $('<input>', { 
      type: 'number', 
      style: 'width: 35px', 
      min: '1', 
      max: '99', 
      value: '1' 
     }); 

     var $button = $('<button>', { 
      type: 'button', 
      class: 'remove_item', 
      text: 'delete' 
     }); 

     $(this).parent().after($('<br>', { 
      class: 'acapo' 
     }), $('<div>', { 
      class: 'prova' 
     }).append($mySelect, $input, $button)); 

    $(this).unbind('change'); 
    $(this).unbind('click'); 
    $(this).on('click', function(){ 
     currentSelection = $(this).find(":selected").text(); 
    }); 
    $(this).on('change',function(){ 

     console.log("nuovo bind"); 
     var selectedValue = $(this).find(":selected").text(); 
     if (currentSelection !== selectedValue) { 
      console.log(currentSelection + " to "+ selectedValue); 

      $("select").not(this).each(function(index) { 
     $(this).append($('<option />', { 
       value: currentSelection, 
       text: currentSelection 
     })); 

     $(this).children().each(function() { 
      if (this.innerHTML === selectedValue) { 
     console.log("eliminazione"); 
     $(this).remove(); 

      } 
     }); 

    }); 


     } 
    }); 


    }); 
}); 

код имеет какие-то проблемы, и я думал, чтобы использовать существующий плагин вместо этого кода. Есть ли кто-нибудь, кто знает плагин, который заставляет это работать?

Answer 1

Я думаю, что вы ищете что-то вроде этого:

http://codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/

Answer 2

Вот вариант Использование JavaScript шаблонов. Я объявляю свои доступные параметры в верхней части массива, отделяя мою модель данных от пользовательского интерфейса. Я использую библиотеку handlebars, чтобы затем скомпилировать шаблон и добавить его в DOM. Fiddle: http://jsfiddle.net/LNP8d/1/

HTML/Рули

<script id="select-template" type="text/x-handlebars-template"> 
    <div> 
    <select class="target" id ="select-{{id}}"> 
     <option value="">Select an option…</option> 
     {{#each options}} 
      {{#unless selected}} 
       <option data-option-key="{{@key}}" value="{{value}}">{{label}}</option> 
      {{/unless}} 
     {{/each}} 
    </select> 
    <input type="number" style="width: 35px" min="1" max="99" value="1"> 
    </div> 
</script> 

<div id="container"> 
</div> 

Javascript

//Declare the available options 
var options = { 
    option1: { 
     value: 1, 
     label: "Option 1" 
    }, 
    option2: { 
     value: 2, 
     label: "Option 2" 
    }, 
    option3: { 
     value: 3, 
     label: "Option 3" 
    }, 
    option4: { 
     value: 4, 
     label: "Option 4" 
    }, 
} 
source  = $("#select-template").html(), 
template = Handlebars.compile(source), 
onScreen = 0; 

//Adds another select menu 
var showSelect = function(){ 
    onScreen++; 
    $("#container").append(template({id:onScreen, options:options})) 
}; 

//Listens to change events 
$("body").on("change", ".target", function(){ 
    options[$(this).find(":selected").data("option-key")].selected = true; 
    showSelect(); 
}); 

//Initialises the UI 
showSelect(); 

Пожалуйста, обратите внимание: это не полный пример. Если вы решите использовать этот метод, вам нужно добавить некоторые проверки того, что происходит, когда параметры заканчиваются, и если кто-то изменяет параметр. Надеюсь, вам удастся показать вам альтернативу, возможно, более гибкий метод.