如何通过MaterializeCSS调用SELECT上的getSelectedValues

Question

情况很简单。我只想获取选择框的选定值。我正在使用MaterializeCSS和JQuery。

Materialize为其Select Form Item提供了一个很好的文档。

在这里，我们可以知道，首先必须使用formSelect（）-Function初始化选择框。这是我在JavaScript文件中所做的：

<div id="managementsite">
    <h3 class="center">Management</h3>

    <div class="toolbar">
        <div class="input-field left">
            <select>
                <option value="" disabled selected>Choose Filter</option>
                <option value="a">Define new filter</option>
                <option value="1">Filter1</option>
                <option value="2">Filter2</option>
            </select>
        </div><i class="material-icons left">check</i>
    </div>
</div>

$(document).ready(function(){
  $('#managementsite select').formSelect();
});

因此，选择框已初始化。

我现在要从中选择一个项目，单击一个按钮，然后从我选择的项目中获取值。再次：价值！不是内文。

因此，Materialize提供了一种执行此操作的方法。 .getSelectedValues（）是要调用的函数。但是不幸的是，这只给我一个长度为1的空字符串数组。

这是我的工作：

$("#managementsite .toolbar").on("click", "i.material-icons", function(e){
  var filter = $("#managementsite .toolbar .input-field ul li.selected");

  console.log($('#managementsite .toolbar .input-field ul').formSelect("getSelectedValues"));
  //Then do something with the value
});

原因，我not引用“选择字段”的原因是，原始“选择”字段将被隐藏并被类似[]的东西覆盖>

<div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a96">
    <ul id="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a96" class="dropdown-content select-dropdown" tabindex="0">
        <li class="disabled selected" id="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a960" tabindex="0"><span>Choose Filter</span></li>
        <li id="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a961" tabindex="0"><span>Define new filter</span></li>
        <li id="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a962" tabindex="0" class="selected"><span>Filter1</span></li>
        <li id="select-options-c51fc90b-2c60-e17d-9466-2e2cf7216a963" tabindex="0"><span>Filter2</span></li>
    </ul>
    <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
    <select tabindex="-1">
        <option value="" disabled="" selected="">Choose Filter</option>
        <option value="a">Define new filter</option>
        <option value="1">Sev4,5+PROD</option>
        <option value="2">Only Java</option>
    </select>
</div>
所以问题是，如何正确调用getSelectedValues（）方法。我在哪个对象上调用该方法？如上所示，当我选择一个选项时，<select>-<option>不会改变。但是<ul>-<li>可以，因为选择class="selected"时有<li>。

这意味着，我可以过滤所选的<li>，但是然后我就无法从<option>标签中获取值。

想要这些值的原因是，我希望在“我选择一个过滤器”和“我想定义一个新的过滤器”之间有所区别，这是值“ a”。当选择值a时，我要显示一个模式，用户可以在其中定义他的新过滤器。

选择其他值时，必须从数据库中调用并应用过滤器。

希望您理解我的问题。请帮助我，如何从选择框/ <ul>-列表中正确获取选择的Value（！）？

问候，xola

情况很简单。我只想获取选择框的选定值。我正在使用MaterializeCSS和JQuery。 Materialize为其选择表单项提供了很好的文档。在这里，我们可以...

Answer 1

通话