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

这是一个使用javascript模板的选项。我在数组的顶部声明了我的可用选项，从而将我的数据模型与UI分开。我正在使用把手库然后编译模板并将其附加到DOM中。小提琴：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();

请注意：这不是一个完整的例子。如果您决定使用此方法，则需要添加一些检查，以确定在选项用完时以及有人更改选项时会发生什么。我希望它成功地为您展示了一种可能更灵活的方法。

Answer 2

我认为你正在寻找这样的东西：

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

在jQuery中进行多项选择

2 个答案: