选中带有jQuery的选择框

Question

I am trying to check a select box value. I know this question is asked earlier on Stack, but I can't get it work with these questions.

This is my select form:

<ul id="config-steps">
    <span class="step-number">4</span>
    <select id="type">
       <option value="">-- <?php _e( 'Select glasstype' ); ?> --</option>
       <option value="1"><?php _e( 'Mat' ); ?></option>
       <option value="2"><?php _e( 'Glossy' ); ?></option>
    </select>
</ul><!--End config-steps-->

jQuery:

$( "#config-steps #type" ).change( function() {
    var slct = $( this );
    var type = slct.children( ":selected" ).val()

    if( type === "" ) {
        slct.parents('li').find('.step-number').removeClass( 'unvalid-step' ).addClass( 'valid-step' ); 
    } else {
        slct.parents('li').find('.step-number').removeClass( 'valid-step' ).addClass( 'unvalid-step' );
    }

});

Answer 1

You need to use the val() on the control and not its children.

Replace the below code:

var type = slct.children( ":selected" ).val()

With this:

var type = slc.val();

So you will be having:

$( "#config-steps #type" ).change( function() {
    var slct = $( this );
    var type = slct.val();

    if( type === "" ) {
        input.parents('li').find('.step-number').removeClass( 'unvalid-step' ).addClass( 'valid-step' );    
    } else {
        input.parents('li').find('.step-number').removeClass( 'valid-step' ).addClass( 'unvalid-step' );
    }

});

Answer 2

you have to use val() . it will give you the selected option value.

do like this:

$( "#config-steps #type" ).change( function() {
    var slct = $(this);
    var type = slct.val();

    if( type === "" ) {
        input.parents('li').find('.step-number').removeClass( 'unvalid-step' ).addClass( 'valid-step' );    
    } else {
        input.parents('li').find('.step-number').removeClass( 'valid-step' ).addClass( 'unvalid-step' );
    }

});

and you can remove extra variable like this:

var type = $(this).val();

Revised:

$( "#config-steps #type" ).change( function() {


        if($(this).val() === "" ) {
            input.parents('li').find('.step-number').removeClass( 'unvalid-step' ).addClass( 'valid-step' );    
        } else {
            input.parents('li').find('.step-number').removeClass( 'valid-step' ).addClass( 'unvalid-step' );
        }

    });

Answer 3

You should simply call val() on your select element

Try Fiddle

Code:

<select id="type">
       <option value="0">A</option>
       <option value="1">B</option>
       <option value="2"><?php _e( 'Glossy' ); ?></option>
    </select>

<input type="button" class="btn" value="Press"/>

$('.btn').click(function () {
  alert($("#type").val());
});

Answer 4

Get the select box value by its id

ie

var type = $("#type").val();

$( "#config-steps #type" ).change( function() {
    var type = $("#type").val(); //get Value by using its id

    if( type === "" ) {
        input.parents('li').find('.step-number').removeClass( 'unvalid-step' ).addClass( 'valid-step' );    
    } else {
        input.parents('li').find('.step-number').removeClass( 'valid-step' ).addClass( 'unvalid-step' );
    }

});