Question

我想通过jquery更改materialize选择框值。

我在其他选择框的$('#myselect').val('1');事件中使用onchange，但它不起作用。

$("#select1").change(function() {
    $('#myselect').val('1');
});

Answer 1

对我来说似乎工作正常，更改第一个下拉菜单，将第二个下拉菜单的值重置为1。

我在jsFiddle上做了一个粗略的实现：http://jsfiddle.net/55r8fgxy/1/

<select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<select id="myselect">    
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

JS：

$(function() {
    $("#select1").on('change', function() {
        $('#myselect').val("1");

        // re-initialize material-select
        $('#myselect').material_select();
    });
});

Answer 2

根据@logikal的建议，您必须重新初始化

$("#myselect").material_select()

Answer 3

不是使用.val（），而是使用jQuery设置值更清晰：

$('#my-select').find('option[value="my-value"]').prop('selected', true);
$("#my-select").material_select();

Answer 4

$('#myselect').formSelect() ;

新方法是formSelect（），在更新select后使用它。

Answer 5

在2018（Materialize v1.0.0-rc.2）中，首先必须以编程方式设置选项：

$('#SELECT-ID').find('option[value="SELECT-VALUE"]').prop('selected', true);

然后使用以下命令重新初始化select输入：

$("#SELECT-ID").formSelect();

希望有帮助！

Answer 6

使用委托事件为我解决了这个问题。

HTML

 <div class="input-field col s10" id="pickerContainer">
 <select>
            <option value="" disabled selected>Choose your option</option>
            </select>
          </div>

JS

$('#pickerContainer').on('change', 'select', function(){
 console.log("got you");
});

Answer 7

这类似于logikal所回答的但我认为更清洁：

$(".your-component-class").change(function(){

   //your code..


   //re-initialize component
   $(this).material_select();    
});

Answer 8

对于新的实体化1.0.0，请使用.select()代替.material_select()

无需重新初始化的解决方案。

function msValue (selector, value) {
 selector.val(value).closest('.select-wrapper').find('li').removeClass("active").closest('.select-wrapper').find('.select-dropdown').val(value).find('span:contains(' + value + ')').parent().addClass('selected active');
}

然后使用

msValue($("#select_id"), "value_here")

Answer 9

由于 JQuery 不再是 Materialize 库的硬依赖项，因此可以使用任何查找方法通过 init 静态方法轻松更新选择：

const reinitialize = (selector, value) => {
    const element = document.querySelector(selector);
    element.value = value;
    const {
      options
    } = M.FormSelect.getInstance(element); //pass through initialization options;
    return M.FormSelect.init(element, options);
  };

一个可快速运行的演示：

(() => {

  const reinitialize = (selector, value) => {
    const element = document.querySelector(selector);
    element.value = value;
    const {
      options
    } = M.FormSelect.getInstance(element); //pass through initialization options;
    return M.FormSelect.init(element, options);
  };

  const interval = (callback, delay = 250) => {
    callback();
    setTimeout(interval, delay, callback, delay);
  };

  M.AutoInit(); //initializes everything

  interval(() => {
    const id = "test";

    const randVal = Math.floor(Math.random() * 3) + 1;

    reinitialize("#" + id, randVal);
  });

})();

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field col s12">
  <select id="test">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

以下是 JQuery 的上述版本（公平地对待其他回答者 - 这是 this 的通用版本）：

const updateSelect = (selector, value) => $(selector).val(value).formSelect();

请注意，每个解决方案的实际核心是（参见docs）：

<块引用>

每次非本地更新值时都需要重新初始化选择组件

其余的取决于所使用的 Materialize 版本以及是否使用 JQuery。同样重要的是要记住：

<块引用>

material_select() 解决方案已过时！从 Materialise 1.0.0 开始使用 formSelect()

Answer 10

这个答案可能迟了，但可能会帮助别人。

准备就绪时，在下面添加行

B

每次更改“选择”中的选项时，在下面添加行

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

这对我有用，希望对您有所帮助。

Answer 11

解决方案，我在我的项目中使用了

prices-33

我不知道事件触发器是否为您提供了所选项目或所选项目的值-您可以自己检查！

Answer 12

这是我的解决方案，以帮助他人。我用了很多@Raold所说的话。我遇到的问题是，在没有以下代码的情况下进行选择时，选择卡住了。

function updateSelect(value) {
    var select  =  $('#myselectId');
    $(select).val(value);
    var text = $(select).find(':selected').text();
    $(select).closest('.select-wrapper')
        .find('li').removeClass("active")
        .closest('.select-wrapper')
        .find('.select-dropdown').val(text)
        .find('span:contains(' + value + ')')
        .parent()
        .addClass('selected active');
}

Answer 13

我从here

找到了合适的解决方案

对于物化中的多重

<div class="input-field col s12">
<select multiple>
    <option value="" disabled selected>Choose your option</option>
    <option value="1" selected>Option 1</option>
    <option value="2">Option 2</option>
    <option value="3" selected>Option 3</option>
</select>
<label>Materialize Multiple Select</label>

现在你只是对你的Javascript部分进行了一些改动，那就是网址：

<script src="http://materializecss.com/bin/materialize.js" />

而不是

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

或materialize.min.js的任何其他链接

对于多个选择启用：

$(document).ready(function () {
        $('select').material_select();
    });

多数民众赞成。您可以查看此解决方案的演示： JSFiddle

通过jquery更改实现选择框的值

13 个答案: