Javascript 通过jquery更改materialize选择框的值

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

我使用的是

$（'#myselect'）.val（'1'）打开其他选择框的
onchange
事件，但它不起作用

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

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

我在JSFIDLE上做了一个粗略的实现：

正如@logikal所建议的，您必须重新初始化

$("#myselect").material_select()

使用委派事件解决了我的问题

HTML

与使用.val（）不同，使用jQuery设置值更为简洁：

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

这与logikal的回答相似，但我认为更干净：

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

   //your code..


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

对于新的materialize 1.0.0，请使用
.select（）
而不是
.material\u 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")

新方法是formSelect（），请在更新select之后使用此方法。
在2018年（
Materializev1.0.0-rc.2
），首先您必须以编程方式设置选项：

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

然后用以下命令重新初始化
选择
输入：

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

希望有帮助
 这个答案可能晚了，但可能对其他人有所帮助

在Ready上添加下面的行

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

每次在选择中更改选项时，请在下面添加一行

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

这对我来说很有用，希望能有所帮助。
我在项目中使用的解决方案：

document.getElementById("mySelect").addEventListener("change", function()
{
  console.log("Hello, World!")
});

我不知道事件触发器是否为您提供所选项目或所选项目的值-您可以自己检查
 这是我的解决方案，以防对某人有所帮助。我用了很多@Raold说的话。
我遇到的问题是select在没有下面代码的情况下更新时被卡住了

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

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

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元素=document.querySelector（选择器）；
元素值=值；
常数{
选择权
}=M.FormSelect.getInstance（元素）；//传递初始化选项；
返回M.FormSelect.init（元素、选项）；
};
常量间隔=（回调，延迟=250）=>{
回调（）；
setTimeout（间隔、延迟、回调、延迟）；
};
M.AutoInit（）；//初始化所有内容
间隔（（）=>{
const id=“测试”；
const randVal=Math.floor（Math.random（）*3）+1；
重新初始化（“#”+id，randVal）；
});
})();

选择你的选择
选择1
选择2
选择3
物化选择
您想解释到底发生了什么吗？您是否有错误，或者是否可以在jsfiddle.net上复制？如果使用material select box，则不会出现错误，并且选择框的值也不会更改。但是，如果我使用浏览器选择框，它很容易改变。我使用的是materialize选择框不是这个，它也对我有效。请使用materialize css选择框，然后您可以看到我有什么问题。好的，我没有使用过它-但我假设您必须在更改其值后重新初始化
#myselect
元素<代码>$（“#myselect”）.material_select（）尝试所有方法，但找不到任何解决方案，因为在隐藏选择框中更改的值在物化选择框中不会更改。请检查上面更新的JSFIDLE链接以获得有效的解决方案-至少在已提供的有限标记下是这样。如果我们使用jquery timepicker和select box的组合，则选择框的值在$（'#time1'）上更改。在（'selectTime'，function（）{}）：Event第一行与materialize 1.0.0-Beta版本配合使用。
.material\u select（）
方法不再是一种初始化方法，请参见。这是唯一对我有效的解决方案。其他所有方法只工作一次，然后停止。回答非常好。
$（'myselect'）.val（“”）
，在我添加了
$（'#myselect'）.formSelect（）；
。再次感谢！谢谢。效果很好
$(document).ready(function () {
        $('select').formSelect();
    });

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

document.getElementById("mySelect").addEventListener("change", function()
{
  console.log("Hello, World!")
});

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

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);
  };