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

how to change value from select dropdown with just classname in javascript

本文关键字：select 下拉列表 javascript      更新时间：2023-09-26

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

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

我需要将值从10设置为20有人能帮忙解释一下吗？感谢

jQuery示例：

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

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

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

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

<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>
相关文章：