实现多重选择

Question

我有一个Materialise Multiple Select元素。但我似乎无法找到检索所选值的方法。有人知道如何检索选定的值吗？

以下是您选择它时的外观：

当你关闭它时它看起来如何：

但问题是如何在关闭时检索选择器内的值。

编辑：我正在使用Materialise CSS（http://materializecss.com）

Answer 1

你可以用基本的jQuery来获取它; Material标记没有什么特别之处。

对于这样的选择：

<select id="mySelect" multiple>
    <option value="1" selected>Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="2">Option 2</option>
</select>

$('#mySelect').val()将返回一系列选定值：["1", "2"]

Answer 2

尝试（获取更多选择标记）

var datas = {};// object name=> value
$("form").find("select.initialized").each(function() {
    var value_input_select = $(this).parents(".select-wrapper").find("input.select-dropdown").val()
    value_input_select = value_input_select.replace(/ /gi,"").replace(/ /gi,"")
    var value_input_select_array = value_input_select.split(",")
    var value_string = ""
    $(this).find("option").each(function(){
      if(value_input_select_array.indexOf($(this).text().replace(/ /gi,"").replace(/ /gi,"")) >= 0){
        value_string += $(this).attr("value")+","
      }
    })
    if(value_string != ""){
      value_string = value_string.substring(0, value_string.length-1)
    }
    datas[this.name] = value_string;
  });

Answer 3

请尝试一下：在这里，您将找到一种从多重选择中检索和删除值的适当方法。实际上，实体化使用UL和LI来显示选择。这就是它造成错误的原因。

$(document).ready(function () {
$('select').material_select();
$('select').change(function(){
    var newValuesArr = [],
        select = $(this),
        ul = select.prev();
    ul.children('li').toArray().forEach(function (li, i) {
        if ($(li).hasClass('active')) {
            newValuesArr.push(select.children('option').toArray()[i].value);
        }
    });
    select.val(newValuesArr);

    console.log($(this).val());
});

}）;

http://jsfiddle.net/9bL25jw9/59/