我怎样才能重写这个javascript代码，以便它引用每个选项框

How can I rewrite this javascript code, so that it will refer to every optionbox?

本文关键字：引用 选项 javascript 重写 代码      更新时间：2023-09-26

如何重写这个javascript代码，以便它引用每个选项框（而不仅仅是第一个）？

<html>
<div id="form123">
    <select id="day" name="day">
        <option value="abc" name="abc" id="abc">abc</option>
        <option value="other" name="other" id="other">other...</option>
    </select>
    <select id="day" name="day">
        <option value="abc" name="abc" id="abc">abc</option>
        <option value="other" name="other" id="other">other...</option>
    </select>
    <select id="day" name="day">
        <option value="abc" name="abc" id="abc">abc</option>
        <option value="other" name="other" id="other">other...</option>
    </select>
    <script type="text/javascript">
        var selectmenu=document.getElementById("day")
        selectmenu.onchange=function(){
            var chosenoption=this.options[this.selectedIndex]
            if (chosenoption.value=="other"){
                var entered_date = window.prompt("Enter the date","");
                document.getElementById('other').value = entered_date;
                document.getElementById('other').text = entered_date;
            }
        }
    </script>
</div>
</html>

到目前为止，对话框仅在我选择第一个选项框时才显示。

即使

我选择另一个选项框，我也想显示对话框。

将来，将动态添加选项框。

ID必须是唯一的。我建议在更改事件的每个select上使用一个函数，并将this作为参数传递，例如：

function changeDate(obj) {
  var chosenoption = obj.options[obj.selectedIndex];
  if (chosenoption.value == "other") {
    var winProVal = window.prompt("Enter the date", "");
    if (winProVal != null) {
      obj.options[obj.value].value = obj.options[obj.value].text = winProVal;
    }
  }
}
<select class="day" name="day" onchange='changeDate(this);'>
  <option value="abc" name="abc" id="abc">abc</option>
  <option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
  <option value="abc" name="abc" id="abc">abc</option>
  <option value="other" name="other" id="other">other...</option>
</select>
<select class="day" name="day" onchange='changeDate(this);'>
  <option value="abc" name="abc" id="abc">abc</option>
  <option value="other" name="other" id="other">other...</option>
</select>

this是指元素。也用类改变ID。

ID

应该是唯一的（名称也是如此）。您可以定义元素类并相应地更改您的 js。

<html>
<div id="form123">
    <select id="day" name="day" class="day">
        <option value="abc" name="abc1" id="abc1">abc</option>
        <option value="other" name="other1" id="other1">other...</option>
    </select>
    <select id="day" name="day" class="day">
        <option value="abc" name="abc2" id="abc2">abc</option>
        <option value="other" name="other2" id="other2">other...</option>
    </select>
    <select id="day" name="day" class="day">
        <option value="abc" name="abc3" id="abc3">abc</option>
        <option value="other" name="other3" id="other3">other...</option>
    </select>
    <script type="text/javascript">
        var selectmenu=document.getElementsByClassName("day");
        for (var i = 0; i < selectmenu.length; ++i) {
            selectmenu[i].onchange=function(){
            var chosenoption=this.options[this.selectedIndex]
                if (chosenoption.value=="other"){
                    var entered_date = window.prompt("Enter the date","");
                    this.options[1].value = entered_date;
                    this.options[1].text = entered_date;
                }
            }
        }
    </script>
</div>
</html>
相关文章：