如何验证是否选择了 select html 元素的选项答案

【问题标题】：How to validate if an option of select html element is selected如何验证是否选择了 select html 元素的选项
【发布时间】：2016-01-11 20:49:14
【问题描述】：

我有一个 javascript 函数，可以从 select html 元素中删除选定的选项。

function fn_delete()
{
    var result = confirm("Are you sure?");
    if (result) 
    { 
        var x = document.getElementById("t2");
        x.remove(x.selectedIndex);
        var i;
        for(i=0; i<t2.length; i++)
        {
            if(t2.options[i].selected)
            {
                t2.remove(i);
            }
        }
   }
}

问题是即使用户没有选择任何选项并单击删除，他仍然会收到“您确定”的确认消息。验证是否选择了任何选项以及如何实施的条件是什么？

【问题讨论】：

标签： javascript

【解决方案1】：

你的逻辑有点不对劲..调用函数..THEN问“你确定吗”IF它是SELECTED

已编辑这是FIDDLE

    <input type="checkbox" id="t2">

<div id="remove" onclick="fn_delete()">
Remove
</div>
<script>
function fn_delete() {

  var t2 = document.getElementById("t2");

  var i;
  //alert (t2.length);
  //for (i = 0; i < t2.length; i++) {
  //alert('made for');
    if (t2.checked) {
      var result = confirm("Are you sure?");
      if (result) {
        //t2.remove(i);
        t2.remove(t2.selectedIndex);
      }
    }
  //}

}
</script>

【讨论】：

虽然你的逻辑对我来说看起来很完美，但你的代码不起作用！
您的代码中还有其他错误...例如定义 x .. 然后调用未定义的 t2 ..
问题出在您的代码中，我可以删除一个选项，但我根本没有收到任何确认消息。
You never enter the for ... t2.length is undefined 看看这个小提琴，这样你就可以看到我在说什么了 ..jsfiddle.net/jm5b5p9L/3
我对此完全陌生，所以我可以假设你没事，但我仍然看不出我做错了什么。

【解决方案2】：

实际上，默认情况下，如果页面重新加载等，可能会选择第一个选项。因此引入“无”或“空”选项，然后检查 ndex 是否大于零会有所帮助。显然你可以删除alert(... 的东西

function fn_delete() {
  var ch = document.getElementById("t2").selectedIndex;
  alert(ch);
  if (ch > 0) {
    var result = confirm("Are you sure?");
    if (result) {
      var x = document.getElementById("t2");
      x.remove(x.selectedIndex);
      var i;
      for (i = 0; i < t2.length; i++) {
        if (t2.options[i].selected) {
          t2.remove(i);
        }
      }
    }
  }
}

<select id="t2">
  <option>nothing</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>
<input type="button" onClick="fn_delete();" value="check">

【讨论】：

尝试删除 'nothing' 的值。它不会发生。就像在我的项目中使用此代码一样，我无法删除列表中的第一个元素。
"nothing" 是占位符，你的第一个选项是 "one"

【解决方案3】：

您可以在您的select 元素上放置一个onchange 属性，以便仅在选择一个选项后启用您的按钮。

不过，您确实可以通过多种方式做到这一点。正如另一位用户所建议的那样，您还可以在按钮上设置一个单击处理程序来检查是否有选择开始。我更喜欢在事物未处于验证状态时禁用按钮以单击它们。

// checks if any options are selected, and enables/disables the Delete button as needed
function checkSelected() {
  var select = document.getElementById("t2"),
    deleteBtn = document.getElementById("delete"),
    hasSelected = false;

  for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].selected) {
      hasSelected = true;
      break;
    }
  }

  deleteBtn.disabled = hasSelected ? '' : 'disabled';
}

// removes the selected options from the list
function fn_delete(optlist) {
  var x = document.getElementById("t2");

  if (confirm("Are you sure?")) {
    x.remove(x.selectedIndex);
    for (var i = 0; i < t2.length; i++) {
      if (t2.options[i].selected) {
        t2.remove(i);
      }
    }
  }
}

<select multiple id="t2" onchange="checkSelected()">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

<br>
<br>

<input type="button" id="delete" value="Delete Selected" disabled onclick="fn_delete()">

【讨论】：

【解决方案4】：

如果没有选择任何选项，

selectedIndex 等于 -1：

if (x.selectedIndex == -1) {
// please, make a selection
}

【讨论】：

为什么要添加更多代码？他已经写了所有需要的东西......只需要重新订购。