CODEWITHSUNDEEP
jqueryhtml
Thug
Thug

Reputation: 45

jquery select selected value undefined

i have problem with this line var value = $("#opstina option:selected").val(); , but only in chrome i get that value is undefined. In FireFox, and IE, works fine, only in chrome i get this warning. Does someone know why? Html code is 

<select id="opstina" name="opstina">
      <option value="0">Izaberite Mesto</option>
      <option value="1" selected="selected">Novi Sad-grad 1</option>
     <option value="2">Beograd-Stari Grad</option>
</select>

This is my jquery code 

if ($("#drzava option:selected").length) {
                    $("select#opstina").attr("disabled","disabled");
                    $("select#opstina").html("<option>wait...</option>");
                    var id = $("select#drzava option:selected").attr('value');
                        $.post("select_opstina.php", {id:id}, function(data){
                        $("select#opstina").removeAttr("disabled");
                         alert( "html koji bi trebao biti upisan u select:\n\n" + data );
                        $("select#opstina").html(data);
            });
                        if ($("#opstina option:selected").length) {
                        alert('Došao sam pred petlju');
                         var value = $("#opstina option:selected")[0].value;
                         alert(value);
                        var sel = $("#opstina").val();
                        if (sel!=0) {
                              alert('Ušao sam u petlju, i selektovano polje za opštinu je' + sel );
            $("select#mesto").attr("disabled","disabled");
            $("select#mesto").html("<option>wait...</option>");
            var id= $("select#opstina option:selected").attr('value');
            alert(id);
            $.post("select_mesto.php", {id:id}, function(data){
                alert("html koji bi trebao biti upisan u select:\n\n" + data );
                $("select#mesto").removeAttr("disabled");
                $("select#mesto").html(data);
            });
        }
    }

                } 
}

Upvotes: 4

Views: 33322

Answers (5)

mrana
mrana

Reputation: 161

I ran into exact same issue years later from you :) It will sound weird, but doing this simple change worked for me!! I had to use different values for id and name.
Change select id="opstina" name="opstina" to select id="opstina" name="some other name"

After this, your $("#opstina option:selected").val() will work fine.

Upvotes: 0

Rakesh Juyal
Rakesh Juyal

Reputation: 36749

Following should work in all browser:

$('#drzava').find(":selected").val();   //tested in Chrome, safar, FF.

Also, your drop down is not multi-select, so you can simply use this as well:

$('#drzava').val(); //For multi-select too this work. In that case it gives you array of values.

Upvotes: 13

S. S. Rawat
S. S. Rawat

Reputation: 6101

Try this this will help you

   $("#opstina").change(function(){
        var value = $(this).val();// Value of selected option
        var Text = $(this).val();// Text of selected option
        alert('Value: '+value);
        alert('Text:' +Text);
    });

Fiddle Here

Upvotes: 0

Adil
Adil

Reputation: 148110

Its working for me, you can also use value with DOM object you can use indexer to convert to DOM object or use get function

Live Demo

$("#opstina option:selected")[0].value;
$("#opstina option:selected").val()

Upvotes: 5

BENARD Patrick
BENARD Patrick

Reputation: 30975

I'm confuse because :

$('#opstina').on('change', function(){
    alert (  $('#opstina option:selected').val()  );
});

works : http://jsfiddle.net/Vm3qu/

and with base selected : http://jsfiddle.net/Vm3qu/1/

Upvotes: 1

Related Questions