如何使用 onchange jquery post 填充两个不同的 select 框

Question

对此进行了研究，但我找不到我的解决方案。我有 select 盒像这样的书。

<select name="book" id="book">
<option value="1">fasion</option>
<option value="2">games</option>
<option value="3">sports</option>
</select>

我正在发送带有 jquery post 的图书 ID，并获取记录并将其类别填充到另一个 select 框中，ID 为数据库中的 #slcCatList。

$('#book').change(getDropdownLoads);
function getDropdownLoads() {
    var bid = $(this).val();
    $.post('fetchdata.php', { master_book_id : bid }, populateDropdown, 'html');
}

function populateDropdown(data) {
    if (data != 'error') {
        $('#slcCatList').html(data);
    }
}

fetchdata.php 针对 select 框的此查询返回结果 #slcCatList 工作正常。

select * from books where id = $bid" // which also has author_name

<select id="slcCatList "> 
</select>

我需要的是，同样我想填充另一个 select 框 #authorName 使用相同的 post 请求针对同一查询。

<select id="authorName ">
// fetched author_name
</select>

我该怎么做？

Answer 1

假设您在 backend.I 使用 mysql 我提供一些代码，有一些假设变量 -

通过使用 json，您可以编写响应来分隔两个 select 标签。

PHP

//---
$dropDown1='<select id="slcCatList ">';
$dropDown2='<select id="authorName">';

$q="select * from books where id = $bid" ;
$rs=mysql_query($q);
while($row=mysql_fetch_row($rs,MYSQL_BOTH)
{
 $dropDown1 .='<option>'.$row['category'].'</option>';
 $dropDown2 .='<option>'.$row['name'].'</option>';
}
$dropDown1 .='</select >';
$dropDown2 .='</select >';

$result=array("category"=>$dropDown1,"name"=>$dropDown2);
echo json_encode($result);

在客户端，我表示您可能需要的函数定义。你必须创建两个 div 来包装你的两个下拉菜单说 (slcCatListWrapper,authorNameWrapper)

JAVASCRIPT

function populateDropdown(data) {
    if (data != 'error') {
        var obj=JSON.parse(data);
        $('#slcCatListWrapper').html(obj.category);
        $('#authorNameWrapper').html(obj.name);
    }
}

如何使用 onchange jquery post 填充两个不同的 select 框

how to populate two different select boxes with onchange jquery post

jquery

post

onchange