选择第一个下拉列表时获取下拉列表的值

Question

        <select style="width:300px;" id="n" name="userListingCategory">
              <option  disabled="disabled">Category...</option>
                  <?php while($row = $sth2->fetch(PDO::FETCH_ASSOC))
                  {echo "<option value=". $row['catID'] . ">" .$row['catName']."</option>";}
                unset($sth2);
                ?>

            </select> 
             <select style="width:340px;" id="n" name="userListingSCategory">
           <option  disabled="disabled">Sub-Category...</option>
               <?php while($row = $sth3->fetch(PDO::FETCH_ASSOC))
                  {echo "<option value=". $row['scatID'] . ">" .$row['scatName']."</option>";}
                unset($sth3);
             ?>

这会生成两个带有值的下拉列表。

单击 userListingCategory 后，我希望运行以下 SQL 来获取关联的子类别 (userListingSCategory)：

SELECT scatID, scatName
FROM Category C, SubCategory SC
WHERE $valueOfFirstSelected = SC.catID;

本质上，这将获取与 ID 关联的子类别 ID 和名称最初选择的类别的名称（因此：$valueOfFirstSelected）

有人吗？ Ajax 或 jQuery 或 Php 将是最有益的。

谢谢

Answer 1

你的文件：

<select id="select_one" onchange="FillSelectTwo(this.options[this.selectedIndex].value)">
    ...
</select> 
<select id="select_two">
    ...
</select>

<script type="text/javascript">
function FillSelectTwo(id) {
    $('#select_two').find('option').remove();
    $.ajax({
        url: 'ajax_fill_select_two.php?id='+id,
                    dataType: 'text',
        success: function(data) {
            $('#select_two').append(data);
        }
    });
}
</script>

ajax_fill_select_two.php：

<!-- of course you need to generate it using $_GET['id'] -->
<option value="0">text</option>
<option value="1">text</option>
<option value="2">text</option>
<option value="3">text</option>

最好的解决方案是通过ajax响应发送JSON数据并添加option字段通过 JavaScript 选择两个