I'm trying to get the selected value from a drop down list via jQuery. I have a bit of javascript that validates a form when I click SEND, to make sure there are no blanks, code is as follows:
function formCheckDancer(formobj){                               // Enter name of mandatory fields             var fieldRequired = Array("dancerStageName", "dancerFullName", "dancerPhone", "dancerEmail", "dancerCountry", "dancerAvailableDate");              // Enter field description to appear in the dialog box             var fieldDescription = Array("Stage Name", "Full Name", "Phone Number", "Email Address", "Nationality", "Availability");              // dialog message             var alertMsg = "Please complete the following fields:\n";                        var l_Msg = alertMsg.length;              for (var i = 0; i < fieldRequired.length; i++){                 var obj = formobj.elements[fieldRequired[i]];                                if (obj){                     switch(obj.type){                     case "select-one":                                               if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "" || obj.options[obj.selectedIndex].text == "..."){                             alertMsg += " - " + fieldDescription[i] + "\n";                         }                         break;                     case "select-multiple":                         if (obj.selectedIndex == -1){                             alertMsg += " - " + fieldDescription[i] + "\n";                         }                         break;                     case "text":                     case "textarea":                         if (obj.value == "" || obj.value == null){                             alertMsg += " - " + fieldDescription[i] + "\n";                         }                         break;                     case "checkbox":                         if (obj.checked == false){                                               alertMsg += " - " + fieldDescription[i] + "\n";                         }                         break;                     default:                     }                     if (obj.type == undefined){                         var blnchecked = false;                         for (var j = 0; j < obj.length; j++){                             if (obj[j].checked){                                 blnchecked = true;                             }                         }                         if (!blnchecked){                             alertMsg += " - " + fieldDescription[i] + "\n";                         }                     }                 }             }              if (alertMsg.length == l_Msg){                 return sendDetailsDancer(); //Send email if all field are populated.                 return true;                             }else{                 alert(alertMsg);                 return false;             }         }          function sendDetailsDancer(){                                    var stagename = $("input[name=dancerStageName]").val();                      var fullname = $("input[name=dancerFullName]").val();             var phone = $("input[name=dancerPhone]").val();             var email = $("input[name=dancerEmail]").val();                                                                                                          var nationality = $("#dancerCountry").val();                         var availability = $("input[name=dancerAvailableDate]").val();                  $("#contact_form_result_dancer").html('<center><img src="loading.gif" width="32" height="32" /></center>');             $("#contact_form_result_dancer").show();             $.post("http://localhost/lapello/wp-content/themes/lapello/sendMailDancer.php", {stagename: stagename, fullname: fullname, phone: phone, email: email, nationality: nationality, availability: availability}, function (data){                 $("#contact_form_result_dancer").html(data);                         });             setTimeout("contactReturnDancer()", 4000);             return false;         }   In this case Nationality is the value I want. As you can see I've tried:
var nationality = $("#dancerCountry").val();   which doesn't seem to work.
If I put the following alert statement: alert(obj.options[obj.selectedIndex].text); after case "select-one" the correct value is output so I know its being passed correctly.
I'm just not sure how to capture it in the sendDetailsDancer function.
Any help appreciated.
Regards, Stephen
Answer: Use the jQuery :selected Selector You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.
With jQuery, you can use the . val() method to get an array of the selected values on a multi-select dropdown list.
Syntax of jQuery Select Option$(“selector option: selected”); The jQuery select option is used to display selected content in the option tag. text syntax is below: var variableValue = $(“selector option: selected”).
var nationality = $("#dancerCountry").val(); should work. Are you sure that the element selector is working properly? Perhaps you should try:
var nationality = $('select[name="dancerCountry"]').val(); 
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With