jQuery get the selected dropdown value on change

Question

I'm trying to get the value of a dropdown on change (and then change the values in a second dropdown).

EDIT: Thanks for all the replies, i've updated to add the () but the code is returning nothing, not null or undefined just a blank alert window

However when I alert it out the attr(value) is undefined.

Any ideas on what i'm missing?

Here is my code:

<script type="text/javascript">
            $(document).ready(function() {

                var roomID = "0"
                $('.dropone').load('ajaxdropdown.aspx');
                $('.droptwo').load('ajaxdropdown.aspx?drpType=room&roomid=' + roomID);

                $('.dropone').change(function() {
                var ts = new Date().getTime();
                alert($(this).val)

                    $(".droptwo").empty();
                    $(".droptwo").load("ajaxdropdown.aspx?drpType=room&roomid=" + $(this).attr("value") + "&ts=" + ts);
                });

            });        
        </script>

Answer 1

val is a method, not a property.

use it like val()

If you are using it many places, i would assign it to a local variable and use it thereafter.

Also you can use the $.now() function to get the unique time stamp. It is equal to DategetTime();

$('.dropone').change(function() {    
    var item=$(this);
    alert(item.val())
    $(".droptwo").empty();
    $(".droptwo").load("ajaxdropdown.aspx?drpType=room
                        &roomid=" +item.attr("value") + "&ts=" + $.now());
});

Answer 2

$('.dropone').change(function() {
  var val = $(this).val(); 

  // OR

  var val = this.value;
})

Answer 3

You must obtain the value using a method, not a property. Use this:

alert($(this).val())

Answer 4

将圆括号添加到您的 val： alert($(this).val())

Answer 5

You can also obtain custom attributes from the dropdown as below;

     $('.someclass').change (function () { 
              var val = this.value;
              alert(val);                                       //selected value

               var element = $(this).find('option:selected');  // assign selected element
               var myTag = element.attr("aTag");              // get attribute by name
               alert(myTag);
    });


<option name='somename' id='someid' aTag='123' value='XYZ'>XYZ</option>

Answer 6

Check jQuery and Javascript methods here to get Single/ Multiple selected values in the Drop Down

Demo Link

jQuery Method: Method to get Selected Value from a select box:

HTML

<select id="singleSelectValueDDjQuery" class="form-control">
    <option value="0">Select Value 0</option>
    <option value="8">Option value 8</option>
    <option value="5">Option value 5</option>
    <option value="4">Option value 4</option>
</select>

<input type="text" id="textFieldValueJQ" class="form-control"
    placeholder="get value on option select">

jQuery

$("#singleSelectValueDDjQuery").on("change",function(){
    //Getting Value
    var selValue = $("#singleSelectValueDDjQuery").val();
    //Setting Value
    $("#textFieldValueJQ").val(selValue);
});

Method to get Selected Value Option Text from a select box:

HTML

Select Value 0 Option value 8 Option value 5 Option value 4

<input type="text" id="textFieldTextJQ" class="form-control"
                placeholder="get value on option select">

jQuery

$("#singleSelectTextDDjQuery").on("change",function(){
    //Getting Value
    var selValue = $("#singleSelectTextDDjQuery :selected").text();
    //Setting Value
    $("#textFieldTextJQ").val(selValue);
});