如何验证是否选择了select html元素的选项
How to validate if an option of select html element is selected
我有一个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);
}
}
}
}
问题是,即使用户没有选择任何选项并点击删除,他仍然会收到"你确定吗"的确认消息。如果选择或不选择任何选项,验证的条件是什么?如何实现?
您的逻辑有点偏离。。调用函数。。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>
实际上,默认情况下,如果页面重新加载等,可以选择第一个选项。因此,引入"无"或"空"选项,然后检查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">
您可以在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()">
selectedIndex如果未选择任何选项,则等于-1:
if (x.selectedIndex == -1) {
// please, make a selection
}
相关文章:
- 在html Select中添加搜索
- 如何将具有相同功能的两个select html标签的两个JS组合在一起
- 当select标记触发onChange事件时,从mysql数据库加载html表
- HTML SELECT-使用JavaScript按VALUE更改所选选项
- 对javascript使用.html中的select id
- 使用JavaScript在select字段中使用optgroup设置html选项值
- 使用jQuery在select选项上设置HTML数据属性
- 如果值为空或0,如何更改html select标记的边框颜色
- 在Select-HTML中获取选项的值
- JavaScript+addEventListener'单击'在select html对象上忽略
- 使用 JavaScript 和 AJAX 选项创建 Select HTML
- 如何验证是否选择了select html元素的选项
- 使用DOM按钮更改Select HTML元素中的Selected Value单击select2.js
- 单击select html元素
- 检测用户对select>.html()"
- 从select html标签中选择的值在javascript if/else语句中没有产生正确的结果
- 选择框的html选项的动态设置不会出现在select html中
- 如何使用jQuery从select html元素中选择每个选项元素
- jQuery任务,获取select html元素的值
- Ng:disabled不能用于select HTML元素