1

我正在尝试编写一个以这种方式工作的 jQuery 代码：

加载页面时，它只显示一个字段。

从该字段中选择一个选项，将打开一个新字段，该选项必须是第一个选项的所有选项，除了选择的选项。以此类推，也为对方创造。

jsfiddle 显示在这里

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();

          }
        });

    });


      }
    });


    });
});

该代码有一些问题，我正在考虑使用现有插件而不是该代码。有没有人知道可以使它工作的插件？

4

2 回答 2

1

Here's an option using javascript templating. I'm declaring my available options at the top in an array, thus separating my data model from the UI. I'm using the handlebars library to then compile a template and append it into the DOM. Fiddle: http://jsfiddle.net/LNP8d/1/

HTML/Handlebars

<script id="select-template" type="text/x-handlebars-template">
    <div>
    <select class="target" id ="select-{{id}}">
        <option value="">Select an option…&lt;/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();

Please note: this is not a complete example. If you decide to use this method, you'll need to add some checks for what happens when the options run out and if someone changes an option. I hope it's successful in showing you an alternative a potentially more flexible method though.

于 2013-06-17T12:14:00.410 回答
0

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

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

于 2013-06-17T11:42:57.820 回答