How to check if an item is selected from an HTML drop down list?

Question

I have a drop drown list and I am having trouble checking whether or not a value has been selected from the drop down list

Below is my HTML Code :

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
    <option value="selectcard">--- Please select ---</option>
    <option value="mastercard">Mastercard</option>
    <option value="maestro">Maestro</option>
    <option value="solo">Solo (UK only)</option>
    <option value="visaelectron">Visa Electron</option>
    <option value="visadebit">Visa Debit</option>
</select><br/>

Below is my JavaScript Code :

var card = document.getElementByName("cards")[0].value;
if (card.value == selectcard) {
    alert("Please select a card type");
}

Sachin · Accepted Answer · 2013-04-13T11:38:30.577

44

Well you missed quotation mark around your string selectcard it should be "selectcard"

if (card.value == selectcard)

should be

if (card.value == "selectcard")

Here is complete code for that

function validate()
{
 var ddl = document.getElementById("cardtype");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "selectcard")
   {
    alert("Please select a card type");
   }
}

JS Fiddle Demo

edited Apr 13 '13 at 11:38

answered Apr 13 '13 at 11:14

Sachin

40,216
7
90
102

Well your fiddle retrieves the selected text. What he is looking for is if a user misses to select get an alert to select – Mee Apr 13 '13 at 11:25
@Mee ohh sorry just misunderstand the OP. now I have updated my answer. – Sachin Apr 13 '13 at 11:30
@Sachin Working fine. That `.text` was looking something strange for me lol. Nice one. +1 ;D – Mee Apr 13 '13 at 11:32
for the same question how I can stop the rest of JS from being executed until the selection is done? as you know, after the alert, the rest of code will be executed. – msc87 Nov 24 '15 at 13:01
1

@msc87 use the `return;` statement just before the line from where you don't want to execute the code like https://jsfiddle.net/cxmfk3zu/ – Sachin Nov 24 '15 at 13:33
Thanks for the tip, but does it stop the whole process? because, as far as I know it stops the first function it belongs to. – msc87 Nov 24 '15 at 14:22
You have saved my time. Thanks! – Abdul Rehman Khan May 05 '21 at 09:36

score 8 · Answer 2 · answered Apr 13 '13 at 11:38

8

<script>
var card = document.getElementById("cardtype");
if(card.selectedIndex == 0) {
     alert('select one answer');
}
else {
    var selectedText = card.options[card.selectedIndex].text;
    alert(selectedText);
}
</script>

answered Apr 13 '13 at 11:38

Ashish Chopra

1,413
9
23

1

And what, if the user select the first item ? That "IS" index 0. – TheAlphaGhost Aug 17 '19 at 16:07

Jonathan Applebaum · Answer 3 · 2019-03-28T12:31:36.120

6

You can check if the index of the selected value is 0 or -1 using the selectedIndex property.

In your case 0 is also not a valid index value because its the "placeholder":
<option value="selectcard">--- Please select ---</option>

LIVE DEMO

function Validate()
 {
   var combo = document.getElementById("cardtype");
   if(combo.selectedIndex <=0)
    {
      alert("Please Select Valid Value");
    }
 }

edited Mar 28 '19 at 12:31

answered Mar 28 '19 at 12:23

Jonathan Applebaum

5,738
4
33
52

And what, if the user select the first item ? That "IS" index 0. – TheAlphaGhost Aug 17 '19 at 16:07

score 2 · Answer 4 · answered Apr 13 '13 at 11:27

function check(selId) {
  var sel = document.getElementById(selId);
  var dropDown_sel = sel.options[sel.selectedIndex].text;
  if (dropDown_sel != "none") {

           state=1;

     //state is a Global variable initially it is set to 0
  } 
}


function checkstatevalue() {
      if (state==1) {
           return 1;
      } 
      return false;
    }

and html is for example

<form name="droptest" onSubmit="return checkstatevalue()">

<select id='Sel1' onchange='check("Sel1");'>
  <option value='junaid'>Junaid</option>
  <option value='none'>none</option>
  <option value='ali'>Ali</option>
</select>

</form>

Now when submitting a form first check what is the value of state if it is 0 it means that no item has been selected.

Phillipe Rosário · Answer 5 · 2013-04-13T11:29:11.283

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />

<script>
    var card = document.getElementById("cardtype");
    if (card.options[card.selectedIndex].value == 'selectcard') {
          alert("Please select a card type");
          return false;
    }
</script>

score 0 · Answer 6 · answered May 18 '18 at 19:51

I believe this is the most simple in all aspects unless you call the validate function be other means. With no/null/empty value to your first option is easier to validate. You could also eliminate the first option and start with the most popular card type.

<form name="myForm">
<select id="cardtype" name="cards">
<option value="">--- Please select ---</option>
<option value="mastercard" selected="selected">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select><br />

<input type="submit" name="submit" class="button" value="SUBMIT" onmouseover="validate()"></form>

<script>
function validate() {
 if (document.myform.cards.value == "") {
    alert("Please select a card type");
    document.myForm.cards.focus();
}
</script>

Sandun Susantha · Answer 7 · 2022-07-01T01:19:18.413

0

function checkSelected() {
    if (optionsId.selectedIndex < 0) {
        alert("Please select an item from options");
        return false;
    }}

edited Jul 01 '22 at 01:19

answered Jul 01 '22 at 01:09

Sandun Susantha

1,010
1
10
11

score -1 · Answer 8 · answered Mar 07 '19 at 21:32

-1

Select select = new Select(_element);
List<WebElement> selectedOptions = select.getAllSelectedOptions();

if(selectedOptions.size() > 0){
    return true;
}else{
    return false;
}

answered Mar 07 '19 at 21:32

Dominic Giallombardo

945
10
8

How to check if an item is selected from an HTML drop down list?

8 Answers8

Linked