Get the selected value of selectmenu jquery

JavaScript
1

Hi,
I have a form with couple of drodowns that are styles using selectmenu. These drodowns are hidden initially. On certain conditions it will be displayed. So i need to check if the dropdowns are displayed, the user should select a value from that and then only allow him to submit the form. If the user is not selecting any value, error should be displayed and the form should not be submitted.

JS file for selectmenu

if ($.fn.selectmenu) {
$(‘select.dd-select’).selectmenu({
style:‘dropdown’,
maxHeight: 300,
transferClasses: true
});

}

JS file for validation

$(‘#submitbutton’).click(function(){
var returnValue = true;
$(‘#form1 .required’).filter(‘:visible’).each(function () {
inputVal = $(“.dd-default option:selected”).val();
alert(inputVal); – displaying null
var input = $(this);alert(input.val()); – displaying null
input.next(‘ul.innererrormessages’).remove();
input.removeClass(‘required’);
if (!input.val()) {
input.addClass(‘required’);
var $msg = input.attr(‘title’);
input.after(‘<ul class=“innererrormessages”><li>’+$msg+‘</li></ul>’); --error message not shown
returnValue = false;
}

});
});

$(‘#form1 .required’).change(function () {
var input = $(this);
input.next(‘ul.innererrormessages’).remove();
input.removeClass(‘required’);
alert(input.val());-- displays the value
if (!input.val()) {
input.addClass(‘required’);
var $msg = input.attr(‘title’);
input.after(‘<ul class=“innererrormessages”><li>’+$msg+‘</li></ul>’);-- the error message is also displayed properly
}
});

HTML

<select id=“dd1” name=“dd1” class=“required dd-select” title=“Please select to continue.”>
<option value=“”> –</option>
<%= List %>
</select>

In the above code, if no values are selected, its highlighting but not displaying the error. The error it should take from the title attribute of the select. On change of the value, its alerting the new value. But on submit again the value is displayed as null. If I create a sample select element with teh above validation aline it works fine. I think selectmenu is creating some problem. For selectmenu, do we have any separate way to get the selected value? Can somebody please tell me what I am doing wrong and guide me on this?
Thanks

2

Just quick note: It’s a lot easier for people to read your code if you wrap it in code tags

JS


if ($.fn.selectmenu) {
    $('select.dd-select').selectmenu({
        style:'dropdown',
        maxHeight: 300,
        transferClasses: true
    });
}

JS file for validation


$('#submitbutton').click(function(){
    var returnValue = true;
    $('#form1 .required').filter(':visible').each(function () {
        inputVal = $(".dd-default option:selected").val();
        alert(inputVal); // displaying null
        var input = $(this);alert(input.val()); // displaying null
        input.next('ul.innererrormessages').remove();
        input.removeClass('required');
        if (!input.val()) {
            input.addClass('required');
            var $msg = input.attr('title');
            input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>'); // error message not shown
            returnValue = false;
        }
    });
});

$('#form1 .required').change(function () {
    var input = $(this);
    input.next('ul.innererrormessages').remove();
    input.removeClass('required');
    alert(input.val()); // displays the value
    if (!input.val()) {
        input.addClass('required');
        var $msg = input.attr('title');
        input.after('<ul class="innererrormessages"><li>'+$msg+'</li></ul>'); // the error message is also displayed properly
    }
});

HTML


<select id="dd1" name="dd1" class="required dd-select" title="Please select to continue.">
   <option value=""> --</option>
    <%= List %>
</select>

I’m not sure exactly how jQuery.selectmenu() affects the DOM, but perhaps that’s causing the issue. Once you’ve loaded the page inspect the DOM and check the actual HTML. Perhaps you could post the resultant HTML.

3