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

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

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

新方法是formSelect（），在更新选择后使用此方法。

Answer 4

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

与使用.val（）相比，使用jQuery像往常一样设置值更干净：

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

Answer 6

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

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

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

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

希望能帮助到你！

Answer 7

这个答案可能会迟到，但可能对其他人有帮助。

就绪后添加以下行

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

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

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

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