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     lt label class  paylabel  for  cardtype  gt Card Type  lt  label gt   lt select id  cardtype  name  cards  gt       lt option value  selectcard  gt --- Please select --- lt  option gt       lt option value  mastercard  gt Mastercard lt  option gt       lt option value  maestro  gt Maestro lt  option gt       lt option value  solo  gt Solo  UK only  lt  option gt       lt option value  visaelectron  gt Visa Electron lt  option gt       lt option value  visadebit  gt Visa Debit lt  option gt   lt  select gt  lt br  gt    Below is my JavaScript Code    var card   document getElementByName  cards   0  value  if  card value    selectcard        alert  Please select a card type

User · Answer

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

User · Answer

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

User · Answer

Select select   new Select  element   List lt WebElement gt  selectedOptions   select getAllSelectedOptions     if selectedOptions size    gt  0       return true   else      return false

User · Answer

lt script gt  var card   document getElementById  cardtype    if card selectedIndex    0         alert  select one answer      else       var selectedText   card options card selectedIndex  text      alert selectedText      lt  script gt

User · Answer

lt label class  paylabel  for  cardtype  gt Card Type  lt  label gt   lt select id  cardtype  name  cards  gt   lt option value  selectcard  gt --- Please select --- lt  option gt   lt option value  mastercard  selected  selected  gt Mastercard lt  option gt   lt option value  maestro  gt Maestro lt  option gt   lt option value  solo  gt Solo  UK only  lt  option gt   lt option value  visaelectron  gt Visa Electron lt  option gt   lt option value  visadebit  gt Visa Debit lt  option gt   lt  select gt  lt br   gt    lt script gt      var card   document getElementById  cardtype        if  card options card selectedIndex  value     selectcard               alert  Please select a card type              return false         lt  script gt

User · Answer

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    lt form name  myForm  gt   lt select id  cardtype  name  cards  gt   lt option value    gt --- Please select --- lt  option gt   lt option value  mastercard  selected  selected  gt Mastercard lt  option gt   lt option value  maestro  gt Maestro lt  option gt   lt option value  solo  gt Solo  UK only  lt  option gt   lt option value  visaelectron  gt Visa Electron lt  option gt   lt option value  visadebit  gt Visa Debit lt  option gt   lt  select gt  lt br   gt    lt input type  submit  name  submit  class  button  value  SUBMIT  onmouseover  validate    gt  lt  form gt    lt script gt  function validate      if  document myform cards value              alert  Please select a card type        document myForm cards focus       lt  script gt

User · Answer

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   lt form name  droptest  onSubmit  return checkstatevalue    gt    lt select id  Sel1  onchange  check  Sel1     gt     lt option value  junaid  gt Junaid lt  option gt     lt option value  none  gt none lt  option gt     lt option value  ali  gt Ali lt  option gt   lt  select gt    lt  form gt    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

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

Examples related to javascript

Examples related to html

Examples related to drop-down-menu

Examples related to html-select