如何从 JavaScript 中更改 < select > 值

我有个问题看起来很简单，但我就是做不好。我有一个带有选项列表和默认值的 <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()" />

因此，假设用户选择了 Option1。我用 javascript 得到了这个值，但是之后，我希望选择再次显示“ Default”。

我发现做 document.getElementById("select").value = "defaultValue"是没有用的。

有人知道如何将该值修改回默认值吗？

287313 次浏览
小开

我发现做 document.getElementById("select").value = "defaultValue"不起作用。

您必须经历一个单独的错误，因为这在这个 现场演示工程罚款。

如果您感兴趣，下面是完整的工作代码:

<!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>
小开
最佳答案

将 .value设置为其中一个选项的值对所有模糊当前浏览器都适用。在非常老的浏览器上，你过去必须设置 selectedIndex:

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

如果你的原始代码都不能正常工作，我想知道你是否可以使用 IE 并且在页面上创建一个叫做“ select”的东西？(是作为 name还是作为全局变量?)因为在 有些版本的 IE 有问题中，它们合并了名称空间。尝试改变选择的 id为“ fluglehorn”，如果这个工作，你知道这就是问题所在。

小开

document.getElementById("select").selectedIndex = 0会起作用的

小开

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

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

如果你想回到第一个选项，试试这个:

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

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

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

我想我知道这里的问题是什么-如果你试图让它选择一个不存在的选项，它不会工作。您需要首先添加选项。像这样:

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;

不够优雅，但你懂的。

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

这也将触发连接到此选择的事件

小开

这解决了我的问题

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

但是没有显示选择的值，所以

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

或者

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

我觉得挺好的。

小开

超文本标示语言

<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';
}
}
}
小开

我们可以迭代这个选项来查找并设置相应选项上的 selected属性。

document.getElementsById('select').childNodes.forEach((e, i, a) => {
if (e.value == "<the value you want to be selected>") {
e.selected = "selected";
}
});

对于原始选项，只需使用其值内容。


提交答案