Javascript Jquery Get Dropdown value always 0

Question

I am developing a website using CI, PHP, JQuery. I have a dropdown menu. When I try to get the value using JQuery, the result always 0. Here is my code.

html:

 <div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
 <option value="0">PILIH SATU</option>
 <option value="1">ACURA</option>
 <option value="2">ALFA ROMEO</option>
 <option value="3">ASTON MARTIN</option>
 <option value="4">AUDI</option>
 <option value="5">BENTLEY</option>
 <option value="6">BERTONE</option>
 <option value="7">BIMANTARA</option>
 <option value="8">BMW</option>
 <option value="9">BUGATTI</option>
 <option value="10">BUICK</option>
 <option value="11">CADILLAC</option>
 <option value="12">CHANA</option>
 <option value="13">CHERY</option>
 <option value="14">CHEVROLET</option>
 <option value="15">CHRYSLER</option>
 <option value="17">CITROEN</option>
 <option value="18">CODA</option>
 <option value="19">DAEWOO</option>
 <option value="20">DAIHATSU</option>
 <option value="21">DAIMLER</option>
 <option value="22">DATSUN</option>
 <option value="23">DODGE</option>
 <option value="24">DYNA</option>
 <option value="25">FERRARI</option>
 <option value="26">FIAT</option>
 <option value="27">FORD</option>
 <option value="28">FOTON</option>
 <option value="29">GREELY</option>
 <option value="30">GMC</option>
 <option value="31">GREAT WALL</option>
 <option value="32">HAGLER</option>
 <option value="33">HINO</option>
 <option value="34">HOLDEN</option>
 <option value="35">HONDA</option>
 <option value="36">HUMMER</option>
 <option value="37">HYUNDAI</option>
 <option value="38">INFINITI</option>
 <option value="39">ISUZU</option>
 <option value="40">JAGUAR</option>
 <option value="41">JEEP</option>
 <option value="42">KIA</option>
 <option value="43">KTM</option>
 <option value="44">LAMBORGHINI</option>
 <option value="45">LAND ROVER</option>
 <option value="46">LEXUS</option>
 <option value="47">LIGIER</option>
 <option value="48">LOTUS</option>
 <option value="49">MASERATI</option>
 <option value="50">MAYBACH</option>
 <option value="51">MAZDA</option>
 <option value="52">MCLAREN</option>
 <option value="53">MERCEDES-BEN</option>
 <option value="54">MINI</option>
 <option value="55">MITSUBISHI</option>
 <option value="56">MORGAN</option>
 <option value="57">NISSAN</option>
 <option value="58">OPEL</option>
 <option value="59">PEUGEOT</option>
 <option value="60">PORSCHE</option>
 <option value="61">PROTON</option>
 <option value="62">RANGE ROVER</option>
 <option value="63">RENAULT</option>
 <option value="64">ROLLS-ROYCE</option>
 <option value="65">SAAB</option>
 <option value="66">SKODA</option>
 <option value="67">SMART</option>
 <option value="68">SSANGYONG</option>
 <option value="69">SUBARU</option>
 <option value="70">SUNBEAM</option>
 <option value="71">SUZUKI</option>
 <option value="72">TATA</option>
 <option value="73">TIMOR</option>
 <option value="74">TOYOTA</option>
 <option value="75">TRIUMPH</option>
 <option value="76">VAUXHALL</option>
 <option value="77">VOLKSWAGEN</option>
 <option value="78">VOLVO</option>
 <option value="79">WRANGLER</option>
 </select></div>

JQuery:

$('select[name="brand"]').change(function(){
        var brand = $("select[name='brand']").val();
        alert(brand);
        $.ajax({
            type: "POST",  
            url: '<?php echo site_url("ajax_data/getmodel"); ?>',
            dataType: 'json', 
            data: { vehicle_class : '', vehicle_brand : brand },
            success: function(data) {
                // Clear all options from vehicle class select 
                $('select[name="model"] option').remove(); 

                // Fill vehicle class select 
                $.each(data, function(i, j){ 
                    var row = "<option value=\"" + j.model_id + "\">" + j.model_name + "</option>"; 
                    $(row).appendTo('select[name="model"]'); 
                });
            }
        });
    });

What is wrong with my code actually? Thank you.

Answer 1

I've just put your code in to a text file (named test.html )...

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
<option value="0">PILIH SATU</option>
<option value="1">ACURA</option>
<option value="2">ALFA ROMEO</option>
<option value="3">ASTON MARTIN</option>
:       :        :
<option value="77">VOLKSWAGEN</option>
<option value="78">VOLVO</option>
<option value="79">WRANGLER</option>

<script type="text/javascript">
$('select[name="brand"]').change(function(){
    var brand = $("select[name='brand']").val();
    alert( brand );
});
</script>

</body>
</html>

And the code works, perfectly in FireFox, Chrome and IE8.

Also, my mate says salam sejahtera. :o)

Answer 2

You're selecting with select[name=brand], which means you're trying to access <select value="THIS_IS_WHAT_YOU_ARE_SELECTING">

but you want the selected option, so use

$('select[name=brand] option:selected').val();