Javascript 通过 jquery 更改物化选择框的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30341095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change value of materialize select box by jquery
提问by phpboy
I want to change materialize select box value by jquery.
我想通过 jquery 更改物化选择框值。
I am using $('#myselect').val('1');on onchangeevent of other select box but it not works.
我使用$('#myselect').val('1');的onchange其他选择框的事件，但它不工作。
$("#select1").change(function() {
$('#myselect').val('1');
});
回答by logikal
It appears to work fine for me, changing the first drop down, resets the value of the second drop down to 1.
对我来说似乎工作正常，更改第一个下拉列表，将第二个下拉列表的值重置为 1。
I have done a rough implementation on jsFiddle: http://jsfiddle.net/55r8fgxy/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:
JS：
$(function() {
$("#select1").on('change', function() {
$('#myselect').val("1");
// re-initialize material-select
$('#myselect').material_select();
});
});
回答by Ashish Ranjan
As suggested by @logikal, you have got to re-Initialize
正如@logikal 所建议的，您必须重新初始化
$("#myselect").material_select()
回答by Ankur Shukla
$('#myselect').formSelect() ;
The new method is formSelect(), use this after you have updated the select.
新方法是 formSelect()，在更新选择后使用它。
回答by David Corral
In 2018 (Materialize v1.0.0-rc.2), first you have to set your option programmatically:
在 2018 ( Materialize v1.0.0-rc.2) 中，首先您必须以编程方式设置您的选项：
$('#SELECT-ID').find('option[value="SELECT-VALUE"]').prop('selected', true);
And then re-initialise the selectinput with:
然后使用以下命令重新初始化select输入：
$("#SELECT-ID").formSelect();
Hope it helps!
希望能帮助到你！
回答by migli
Rather than using .val(), it's cleaner to set value as usual with jQuery :
与使用 .val() 不同，使用 jQuery 像往常一样设置 value 更干净：
$('#my-select').find('option[value="my-value"]').prop('selected', true);
$("#my-select").material_select();
回答by Quannt
Using delegated event fixes the problem for me.
使用委托事件为我解决了这个问题。
HTML
HTML
<div class="input-field col s10" id="pickerContainer">
<select>
<option value="" disabled selected>Choose your option</option>
</select>
</div>
JS
JS
$('#pickerContainer').on('change', 'select', function(){
console.log("got you");
});
回答by Raold
For a new materialize 1.0.0 use .select()instead of .material_select()
对于新的实现 1.0.0 使用.select()而不是.material_select()
Solution without re-initialization.
无需重新初始化的解决方案。
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');
}
Then just use
然后只需使用
msValue($("#select_id"), "value_here")
回答by King Of The Jungle
This answer might be late but it might help someone else.
这个答案可能晚了，但它可能会帮助其他人。
On Ready add the line below
在准备好添加下面的行
$(document).ready(function () {
$('select').formSelect();
});
Each time you change an option within your Select add the line below
每次更改 Select 中的选项时，请添加以下行
$("#select1").change(function() {
$('#myselect').val('1');
$('select').formSelect();
});
This is what worked for me, hope it helps.
这对我有用，希望它有所帮助。
回答by Disturb
This is similar to what logikal answered but I think is cleaner:
这类似于 logikal 的回答，但我认为更清晰：
$(".your-component-class").change(function(){
//your code..
//re-initialize component
$(this).material_select();
});
回答by Денис Саенко
Solution, I used in my project:
解决方案，我在我的项目中使用：
document.getElementById("mySelect").addEventListener("change", function()
{
console.log("Hello, World!")
});
I don't know if the event trigger gives you selected item or selected item's value - you can check it yourself!
我不知道事件触发器是否为您提供了选定项目或选定项目的值-您可以自己检查！
