物化多重选择

Question

我有一个物化多重选择元素。但我似乎找不到一种方法来检索所选值。有人知道如何检索所选值吗？

选择它后的外观如下：

关闭它时的外观如下：

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

编辑：我正在使用 Materialize CSS (http://materializecss.com)

Answer 1

你可以使用基本的 jQuery 来获取它；材质标记没有什么特别的。

对于这样的选择：

<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

请尝试一下：在这里您将找到一种从多重选择中检索和删除值的适当方法。实际上，Materialize 使用 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/

Answer 3

尝试一下（获取更多选择标签）

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 4

对于寻找 Vanilla Javascript 解决方案的人，您必须使用 Materialize 元素实例，然后调用其方法

getSelectedValues()

。

这是 Materialise 站点示例：

var instance = M.FormSelect.getInstance(elem);
instance.getSelectedValues(); // You will get an array with all the selected options.

这是来源：https://materializecss.com/select.html