javascriptjqueryhtmldrop-down-menujquery-selectbox

getting val from a 'jQuery Selectbox plugin 0.2' select box dropdown


I recently posted about a problem I was having with not being about to ge the .val() from a selected dropdown. The code was correct but something was preventing the on change from firing correctly. I've narrowed the issue down and found when I remove the select box plugin it works as expected. Can someone please help me get both to work, I'd like to keep select box on these dropdown && also write my own function that will pick up the selected value.

thanks.

Relevant code:

<div class="form-group">
    <select name="numberOfAdults" id="numberOfAdults" tabindex="2">
        <option>-Adults-</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</div>

In script.js

//---------------------------------------------------
//------------------- Selectbox -------------------
//---------------------------------------------------
$(function () {
    $("#numberOfAdults").selectbox();
    $("#numberOfKids").selectbox();
    $("#eventAttending").selectbox();
});

mt script that doesn't give me the value, instead it will also give '-Adults- - -Adults-'

<script>
    $('#numberOfAdults').change(function() {
        var val1 = this.value;
        var val2 = $('#numberOfAdults option:selected').val();
        alert(val1 + " - " + val2);
    });

result: enter image description here


Solution

  • You can try something like this:

    $('#numberOfAdults').selectbox({
          onChange: function (val, inst) {
             alert(val);
          }        
    });
    

    Documentation: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/