如何验证是否选择了选择HTML元素的选项

Question

I have a javascript function that deletes the selected option/options from the select html element.

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);
            }
        }
   }
}

The problem is that even if the user does not select any of the options and click on delete, still he gets the confimation message of "Are you sure". what is the condition to validate if any option is selected at all or not and how to implement it?

Answer 1

You're just a little off in your logic .. Call the function .. THEN ask "Are you Sure" IF it is SELECTED

EDITED Here is the 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>

Answer 2

Actually, by default, the first option may be selected, if the page reloads etc. Thus introducing a "nothing" or "null" option and then check against ndex is greater zero will help. You may delete the alert(... stuff obviously

 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"> 

Answer 3

You could put an onchange attribute on your select element to enable your button only after an option has been selected.

You could really do this a number of ways though. You could also have a click handler on your button that checks if there's a selection to begin with, as another user suggested. I prefer to disable buttons when things are not in a validate state to click them.

 // 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()"> 

Answer 4

selectedIndex equals to -1 if no option is selected:

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