javascript - 在单输入和多输入之间动态切换所选的 js

Question

我正在使用 chosen.js，我想要一个可以在多个输入和单个输入之间动态切换的选择控件。这可能吗？

在下面的示例中，我尝试在选中复选框时更新已选择的内容。 select 正确地添加和删除了多个 attr，但 chosen 不会在多个和单个选择之间切换。

HTML

<select id="my-select">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input type="checkbox" id="my-checkbox">Multiple Selection

JavaScript

$("#my-checkbox").change(function () {
    if ($('#my-checkbox').prop('checked')) {
        $('#my-select').attr('multiple', '').trigger("chosen:updated");
    } else {
        $('#my-select').removeAttr('multiple').trigger("chosen:updated");
    }
});

JSFiddle:http://jsfiddle.net/85xV3/

Answer 1

选择(虽然我是新手)，在检查代码后，为选择创建它自己的标记并将原始标记设置为隐藏，这就是为什么在选择上设置属性无效的原因。

除了每次都重建 .chosen() 之外，没有干净的方法可以做到这一点(据我所知)。

---

看看这个 rough demo - http://jsfiddle.net/AxG7G/

---

代码中的关键部分是，对于每次更改，我们都使用一个函数来重建原始选择并重绘.chosen()

一些额外的标记

<div id="selectcontainer">
    <select id="my-select">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
</div>
<input type="checkbox" id="my-checkbox"/>Multiple Selection

---

然后是带有remake功能的JS

var $select = $('#my-select'), $selectContainer=$('#selectcontainer'), 
$checkbox=$( "#my-checkbox" );

/* start the default .chosen() presentation */
$select.chosen();

function reDrawSelect(multiple) {

    /* get the current select options and attributes */
    var _selectHTML = $selectContainer.find('#my-select').html(); 
    /* clear it */
    $selectContainer.html(""); 
    /* redraw it */
    $select = $('<select id="my-select">'+_selectHTML+'</select>');
    /* set multiple if */
    if(multiple) { $select.attr('multiple','true'); }
    $selectContainer.append($select);
    /* re make .chosen() */
    $select.chosen();


}

$checkbox.change(function() { reDrawSelect($checkbox.is(':checked')); });

---

更新:这可能只解决了一半的问题(当选择了多个选项，然后切换回单个选项时会发生什么......)

编辑:修复第一个示例中的一些问题/语法