使用 javascript 进行下拉验证

Question

我正在做一个验证，检查除了 Please Select... 以外的值是否使用 [=28] 在 asp.net 下拉按钮中 selected =].我在下拉事件的 onchange 中触发验证函数，如果值为 Please Select...，我将在标签控件中显示一条消息。

下面是我的 aspx 代码。

            document.getElementById("ContentPlaceHolder1_drpEditAlerts").onchange = function validate_Quest() {
                var edAlertSelect = document.getElementById("ContentPlaceHolder1_drpEditAlerts");
                if (edAlertSelect.selectedIndex == 0) {
                    document.getElementById("lblEdtAlert").innerHTML = 'Kindly select an alert!';
                    document.getElementById('lblEdtAlert').style.color = "red";
                    document.getElementById("ContentPlaceHolder1_Button3").disabled = true;
                    return false;
                }
                document.getElementById("lblEdtAlert ").innerHTML = '';
                document.getElementById("ContentPlaceHolder1_Button3").disabled = false;
                return true;
            }

<p>
Select an alert to link this scenario* 
   <span style="float: right">
      <asp:Label ID="lblEdtAlert" Text="" ForeColor="Red" Font-Size="Smaller"></asp:Label>    </span>
  <asp:DropDownList ID="drpEditAlerts" runat="server" Height="32px" Width="500px" />
</p>

代码工作正常，当我在下拉列表中有 select 值时，它会显示标签中的消息。但是，当我 select 下拉列表中的一个值时，标签消息仍然显示错误并且没有关闭。

非常感谢任何帮助。

Answer 1

更简单

var select = document.getElementById("ContentPlaceHolder1_drpEditAlerts");
var label = document.getElementById("lblEdtAlert");
var button = document.getElementById("ContentPlaceHolder1_Button3");

window.onload = function() {
  select.onchange = function() {
    var ok = this.selectedIndex > 0;
    label.innerHTML = ok ? "" : 'Kindly select an alert!';
    label.style.color = ok ? "black" : "red";
    button.disabled = !ok;
  }
}

<p>
  Select an alert to link this scenario*
  <span>
      <label id="lblEdtAlert"></label>
    </span>
  <select id="ContentPlaceHolder1_drpEditAlerts">
    <option>Please Select</option>
    <option>Other 1</option>
    <option>Other 2</option>
  </select>
  <button id="ContentPlaceHolder1_Button3">send</button>
</p>

使用 javascript 进行下拉验证

Dropdown Validation using javascript

javascript

dropdownbox