如何在javascript中使用classname更改select下拉列表中的值

Question

当只有一个类名时，如何从选择向下更改值？ 喜欢这一个？

<select class="listbox">
<option value="10">10</option>
<option value="20">20</option>
</select>

我需要将值设置为10到20可以帮助解释一些吗？ 谢谢

Answer 1

jQuery示例：

$('.listbox').val('20')

或者可以很容易地重写为纯JS：

document.getElementsByClassName('listbox')[0].value = '20'

Answer 2

如果你需要多做一次，你可以创建一个干净的例程

<script>

    function changeVal(oldval, newval)
    {
        var options = document.getElementsByClassName('listbox')[0].options;
            for (var i=0; i<options.length; i++)
            {
                if (options[i].value == oldval)
                {
                    options[i].value = newval;
                }
                // Just for test
                console.log(i+'|'+options[i].value);
            }
    }

</script>

<select class="listbox">
    <option value="10">10</option>
    <option value="20">20</option>
</select>
<br>
<a href="#"onclick="changeVal(10, 20)">change</a>