Question

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

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

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

选择（虽然我是新手），在检查代码后，为select创建自己的标记并将原始设置为隐藏，这就是为什么在select上设置属性没有效果。

除了每次重建.chosen()之外，没有干净的方法（AFAIK）。

看一下 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

然后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')); });

更新：这可能只能解决问题的一半（当选择了多个选项时会发生什么，但后来切换回单个... ）

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

Answer 2

我发现使用destroy方法有点简单的解决方案。我检查了什么时候将destroy方法添加到Chosen。它出现在版本0.14.0中，所以虽然最近在版本1.5.0中记录了它，但这并不是新闻。

var checkbox = $('#my-checkbox');
var select   = $('#my-select').chosen();

checkbox.change(function() {
  select
    .chosen('destroy')
    .attr('multiple', checkbox.prop('checked'))
    .chosen();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

<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

动态切换单个和多个输入之间选择的js

2 个答案: