Javascript 自动完成显示名称但存储id的文本框

send caegory id和return子类别名称的header.php文件

类别：
--挑选--
子类别：
--挑选--
$（'#category_id'）。editableSelect（）；
函数getSubcat（）{
var category_id=$（“#category_id”）.val（）；
警报（类别标识）；
$.ajax({
url:'get_subcategory.php'，
键入：“POST”，
数据：{category_id:category_id}，
})
.完成（功能（响应）{
$（'sub#cat_id'）.html（响应）；
});
}

get_subcategory.php文件，用于获取ajax响应和返回子类别

此返回类别名称，但我需要类别id而不是类别名称

---

当您使用jQuery editableSelect插件时，您可能需要查看

例如：

Category :
<select  id="category_id" name="cat_id" required="" class="form-control" tabindex="2">
    <option value="">-- Select --</option>
    <option value="1">First</option>
    <option value="2">Second</option>
</select>
<pre>Last selected: <span id="last-selected"></span></pre>

<script type="text/javascript">
    $('#category_id')
    .editableSelect()
    .on('select.editable-select', function (e, li) {
        $('#last-selected').html(
            li.val() + '. ' + li.text()
        );
    });
</script>

类别：
--挑选--
弗斯特
第二
最后选定的：
$（“#类别_id”）
.editableSelect（）
.on（'select.editable select'，函数（e，li）{
$（“#上次选定”）.html(
li.val（）+'.+li.text（）
);
});

请在此处查看它的实际操作：

所以我猜您要查找的数据是

li.val（）

如果编辑“选择”选项，则不会有值

---

我希望这能帮到你。

老兄，你查过答案了吗？我查过答案了，但没用。因为我在那个里使用了editableSelect（）方法，用于在脚本执行时将其convert标记转换为textbox。所以，我无法获得价值。请登录DOM和style Inspector。好的，伙计，我已经更新了下面的答案。非常感谢先生。这是工作。

<?php 
$conn = mysqli_connect("localhost", "root", "", "iraa");
$sql = "SELECT sub_category_id,sub_category_name FROM sub_categories_master WHERE category_id='$_POST[category_id]'";
$result = mysqli_query($conn, $sql);
while ($data=mysqli_fetch_array($result)) {                              
?>
<option value="<?php echo $data['sub_category_id'] ?>"><?php echo $data['sub_category_name'] ?></option>

Category :
<select  id="category_id" name="cat_id" required="" class="form-control" tabindex="2">
    <option value="">-- Select --</option>
    <option value="1">First</option>
    <option value="2">Second</option>
</select>
<pre>Last selected: <span id="last-selected"></span></pre>

<script type="text/javascript">
    $('#category_id')
    .editableSelect()
    .on('select.editable-select', function (e, li) {
        $('#last-selected').html(
            li.val() + '. ' + li.text()
        );
    });
</script>