jQuery：val（）方法不起作用

Question

I have a dropdown element populated through jquery ajax

    <select name="category" class="form-control"></select>

This is the jquery code for populating the dropdown

    $.post(
    "get_categories.php",
    {
        id: 1
    }, function(data) {
        $($('select[name=category]')).html(data);

    }
);

To see whether the dropdown was successfully populated i use console.log

     }, function(data) {
        $($('select[name=category]')).html(data);
        console.log(data)
    }

This is what i've got in the browser console window

    <option value='1'>Stuffed Toy</option><option value='1'>Plushie</option><option value='1'>Memorabilia</option>

The dropdown was indeed succesfully populated to test whether value will change when i select another option i included this snippet:

    $('select[name=category]').change(function(){
    console.log($(this).val());
});

After changing options this is what ive got

    <option value='1'>Stuffed Toy</option><option value='1'>Plushie</option><option value='1'>Memorabilia</option>
    1

value of dropdown wont change at all. What i've been doing wrong?

Answer 1

Your Html all option value='1' , so you have to find option selected

$('select[name=category]').change(function () {
    console.log($(":selected", this).text());
});

DEMO

Answer 2

To get the value from a dropdown you can use native javascript this.value .

$('select[name=category]').change(function(){
   var selectedValue = this.value;
});

First try to see whether the event is getting invoked or not by putting a console.log inside the change event.

Answer 3

This is btw the php code

    <?php
$id = $_REQUEST['id'];
include 'connect.php';
$query = "SELECT DISTINCT category FROM tbl_product";
$result = db_query($query);
$count = 1;
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()){
        echo $count;
        echo "<option value='".$count."'>".$row['category']."</option>";
        $count++;
    }
}

?>