使用jQuery动态更新下拉列表

Question

I want to make a form with a drop down list that change its value base on an input value on the form. Here is what i have been trying but dropdown list is still empty.

My form

    <form action="../action/subs/custompcorder.php/" method="post">

      <div> <input id="rating" name="rating" onchange="loadComputers()"/> </div>

        <select name="computer" id="computer"></select> 
</div> 

</form>

    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript">  </script>
    <script src="./action/scripts/global.js" type="text/javascript"></script>

query page pcdrop2.php

<?php
include './action/db/connect6.php';

    $rating = $_POST['rating'];   
    $myData=mysql_query("SELECT * FROM Product WHERE product.rate='$rating';");
    while($record=mysql_fetch_array($myData)){    
      echo '<option value="'.$record['product_id'].'">'.$record['product'].'</option>';    
}

?>

js function to pull data from db global.js

    function loadComputers() {
    $val = $('#rating').html();
    $.post('action/subs/pcdrop2.php', {
    rating: $val
    }, function (data) {
    $('#computer').html(data);
});
}

Answer 1

I think that this line of code:

$val = $('#rating').html();

Should actually be:

$val = $('#rating').val();