javascript - jQueryでの複数選択

Question

このように機能するjQueryコードを作成しようとしています:

ページが読み込まれると、1 つのフィールドのみが表示されます。

そのフィールドからオプションを選択すると、新しいフィールドが開かれ、選択されたオプションを除いて、オプションは最初のオプションのすべてである必要があります。など、作成された他のものについても同様です。

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

          }
        });

    });


      }
    });


    });
});

コードに問題があり、そのコードの代わりに既存のプラグインを使用することを考えていました。それを機能させるプラグインを知っている人はいますか？

score 1 · Accepted Answer

これは、javascript テンプレートを使用するオプションです。使用可能なオプションを配列の先頭で宣言しているため、データモデルを UI から分離しています。handlebars ライブラリを使用して、テンプレートをコンパイルし、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…&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();

注意: これは完全な例ではありません。この方法を使用することにした場合は、オプションがなくなったときに何が起こるか、および誰かがオプションを変更したかどうかについて、いくつかのチェックを追加する必要があります。ただし、より柔軟な可能性のある代替方法を示すことに成功したことを願っています。

score 0 · Accepted Answer

私はあなたがこのようなものを探していると思います:

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

javascript - jQueryでの複数選択

2 に答える 2

Related

Reference