如何从 JavaScript 更改 <select> 值

Posted 2023-02-21

技术标签:

【中文标题】如何从 JavaScript 更改 <select> 值【英文标题】：How to change a <select> value from JavaScript 【发布时间】：2012-03-18 10:53:48 【问题描述】：

我有一个看起来很简单的问题，但我就是做错了。我有一个带有选项列表和默认值的<select>。用户选择一个选项并单击一个按钮后，我希望选择返回其默认值。

<select id="select">
 <option value="defaultValue">Default</option>
 <option value="Option1">Option1</option>
 <option value="Option2">Option2</option>    
</select>
<input type="button" value="CHANGE" onclick="selectFunction()" />

假设用户选择选项 1。我使用 javascript 获得该值，但之后，我希望选择再次显示“默认”。

我发现document.getElementById("select").value = "defaultValue" 行不通。

有谁知道如何将该值改回默认值？

【问题讨论】：

How do I programatically set the value of a select box element using javascript? 的可能重复项看看这个：javascriptstutorial.com/blog/… 【参考方案1】：

我发现document.getElementById("select").value = "defaultValue" 行不通。

您一定遇到了一个单独的错误，因为这在 live demo 中运行良好。

如果您有兴趣，这里是完整的工作代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var selectFunction = function() 
            document.getElementById("select").value = "defaultValue";
        ;
    </script>
</head>
<body>
    <select id="select">
        <option value="defaultValue">Default</option>
        <option value="Option1">Option1</option>
        <option value="Option2">Option2</option>    
    </select>
    <input type="button" value="CHANGE" onclick="selectFunction()" />
</body>
</html>

【讨论】：

是否可以选择不在选项中的值？它可能在 chrome、firefox 中工作，但在某些版本的 IE 中，我无法在下拉列表中获取所选值。尝试在 IE9 和 IE 11 中进行测试，结果遇到了同样的问题。【参考方案2】：

将.value 设置为选项之一的值适用于所有模糊当前的浏览器。在非常旧的浏览器上，您过去必须设置selectedIndex：

document.getElementById("select").selectedIndex = 0;

如果这和您的原始代码都不起作用，我想知道您是否可能正在使用 IE 并且在页面上创建了一些名为“select”的东西else？（作为name 还是作为全局变量？）因为some versions of IE have a problem 将名称空间混为一谈。尝试将选择的 id 更改为“fluglehorn”，如果可行，您就知道这是问题所在。

【讨论】：

如果索引0的选项被禁用怎么办？ @MemphisMeng - 然后进行相应调整。【参考方案3】：

document.getElementById("select").selectedIndex = 0 可以工作

【讨论】：

我希望 SELECT 再次显示默认值。我这样做了，显示不再显示默认值如果默认选项位于索引 0，它将在其他索引中使用该索引。请参阅jsfiddle.net/gN3ke/2 这里我默认使用 Option2。并将 selectedIndex 设置为 2 对不起，它在 2019 年不起作用 ||你能提供任何可行的例子吗？【参考方案4】：

您可以使用 selectedIndex 属性将其设置为第一个选项：

document.getElementById("select").selectedIndex = 0;

【讨论】：

【参考方案5】：

如果您希望它返回第一个选项，请尝试以下操作：

   document.getElementById("select").selectedIndex = 0;

【讨论】：

【参考方案6】：

在 selectFunction() 中完成处理后，您可以执行以下操作

document.getElementById('select').selectedIndex = 0;
document.getElementById('select').value = 'Default';

【讨论】：

【参考方案7】：

 <script language="javascript" type="text/javascript">
        function selectFunction() 
             var printStr = document.getElementById("select").options[0].value
            alert(printStr);
            document.getElementById("select").selectedIndex = 0;
        
    </script>

【讨论】：

【参考方案8】：

我想我知道问题出在哪里 - 如果您试图让它选择一个不存在的选项，它将不起作用。您需要先添加选项。像这样：

var option=document.createElement("option");
option.text=document.getElementById('other_referee').value
document.getElementById('referee_new').add(option,null);
document.getElementById('referee_new').value = document.getElementById('other_referee').value;

不优雅，但你明白了。

【讨论】：

【参考方案9】：

$('#select').val('defaultValue'); 
$('#select').change();

这也会触发与此选择挂钩的事件

【讨论】：

或 $('#select').trigger('change');【参考方案10】：

这解决了我的问题，它工作正常

var value = item[index].id;
$("#select2").val(value);

但不显示选定的值，所以

$("#select2").val(value).change();

对我来说很好。

【讨论】：

【参考方案11】：

HTML

<div class="form-group" id="divnacionalidad">                                                               
    <label>Nacionalidad:</label>                                                            
    <select id="nacionalidad" class="form-control">                                                               
        <option value="0">Seleccione una opcion</option>
        <option value="2">Costa Rica</option>
        <option value="1">Nicaragua</option>
    </select>
</div>

Javascript：

function buscarIndice(caden, valor) 
    let cadena = document.getElementById(caden);
    for (let i = 0; i < cadena.children.length; i++) 
        if (cadena.children.item(i).textContent.trim() === valor.trim()) 
            cadena.options.item(i).selected = 'selected';

【讨论】：

El presente codigo, utilizara un select que radica en un html y mediante esa funcion se permite un intercambio de selección endependencia de un texto ya establecido en los option. 请使用edit链接而不是在cmets中添加信息。另外，请用英文写下你的答案，Stack Overflow is an English site. Algo importante los value="Numero" de los option, tiene que estar ordenado de formaassente (0,1,2,3...) Para que funcione。

以上是关于如何从 JavaScript 更改 <select> 值的主要内容，如果未能解决你的问题，请参考以下文章

如何根据它们在 JavaScript 中的顺序更改标签 innerHTML？

JavaScript：如何根据选择更改表单动作属性值？

Javascript - 如何删除 nodeName 或 HTML 标记但不理会内部标记？

select

如何保持 html DOM 元素与关联的 javascript 对象同步？最佳实践

如何从 Javascript 更改 HTML 单选按钮选择？