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

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

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

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

Answer 1

它看起来对我来说很好，改变第一个下​​拉，将第二个下拉的值重置为1。

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

  1 2 3 4 5   1 2 3 4 5  

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

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

HTML

  
  Choose your option   

JS

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

Answer 6

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

 $(".your-component-class").change(function(){ //your code.. //re-initialize component $(this).material_select(); }); 

Answer 7

对于新的实现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 8

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

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

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

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

希望能帮助到你！

Answer 9

我从这里找到了合适的解决方案

对于多重物化

 
  Choose your option Option 1 Option 2 Option 3  Materialize Multiple Select 

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

代替

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

对于多个选择启用：

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

而已。 您可以查看此解决方案的演示： JSFiddle