我如何为HTML 使用JavaScript的元素设置默认值？

Question

如何使用JavaScript为HTML <select>元素设置“选定”（默认）值。又是当前option0被“选中”，如何运行脚本来更改它以显示我想要的值？

例如，这是因为该值先前已保存在数据库中，并且我只希望在用户实际指定这样做的情况下进行更新。但是，如果我未指定值（通过重新选择上一个选项），则保存“编辑”将用加载有<select>的“默认选定”值覆盖以前的值。

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

NOTE：因为我缺乏声誉，无法在这个主题的普通话题中添加我的答案（以下），因此我在这里使用javascript的解决方案是将一个选项设置为在其中显示/选择的选项选择器。这也可以是数据库中的。

Answer 1

使用value属性使用JavaScript设置新的选定值

document.getElementById('selector').value="2";

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true >default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>

Answer 2

<script> 
    let the_default = document.getElementById('option0');
    the_default.selected = false;

    let options = document.getElementsByTagName('option');

    for(i=0; i<options.length; i++){
        if (options[i].value === "<%= or_some_string %>"){
            options[i].selected = true;
        }
    } 
</script>

因此，我们得到了ID标记为默认的选项。将.selected设置为false。然后，我们获得所有选项（这是一个html集合），并对其进行迭代以检查是否有任何选项等于“ String”或“ ”。并将其设置为.selected为true。

Answer 3

使用此

document.getElementById("selector").selectedIndex = 3;

original

Answer 4

您可以使用selectedIndex

document.getElementById("selector").selectedIndex = "2"; // value from db

<select id="selector" name="selector">
  <option id="option0" value="0" selected=true>default </option>
  <option id="option1" value="1">option 1 </option>
  <option id="option1" value="2">option 2 </option>
  <option id="option1" value="3">option 3 </option>
  <option id="option1" value="4">option 4 </option>
</select>