显示名称但存储 ID 的自动完成文本框答案

【问题标题】：Auto complete textbox which display name but store id显示名称但存储 ID 的自动完成文本框
【发布时间】：2018-06-20 07:37:06
【问题描述】：

header.php 文件用于发送 caegory id 并返回子类别名称

 <?php 
     $conn = mysqli_connect("localhost", "root", "", "iraa");
 ?>
 Category :
<select  id="category_id" name="cat_id" required=""  class="form-control" tabindex="2" onselect ="getSubcat()">
    <option value="">-- Select --</option>
    <?php 
        $sql = "SELECT category_id,category_name FROM categories_master";
        $result = mysqli_query($conn, $sql);
        while ($data=mysqli_fetch_array($result)) {                              
    ?>
    <option value="<?php echo $data['category_id'] ?>"><?php echo $data['category_name'] ?></option>
    <?php } ?>
</select>

Sub Category : 
<select id="sub_cat_id" required  name="sub_cat_id"  class="form-control " tabindex="2">
    <option value="">-- Select --</option>
</select>

<script src="js/jquery-1.12.4.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script type="text/javascript">
    $('#category_id').editableSelect();
    function getSubcat() {
        var category_id=$("#category_id").val();
        alert(category_id);
        $.ajax({
            url: 'get_subcategory.php',
            type: 'POST',
            data: {category_id: category_id},
        })
        .done(function(response) {
            $('#sub_cat_id').html(response);
        });
    }
</script>

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

<?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>

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

【问题讨论】：

哥们，你检查过答案了吗？
我检查了答案，但它不起作用。因为我在那里使用了 editableSelect() 方法来执行脚本时将其转换
好的伙计，我已经在下面更新了我的答案。
非常感谢先生。这是工作。

标签： javascript php jquery ajax mysqli

【解决方案1】：

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

例子：

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>

在此处查看实际操作：http://jsfiddle.net/dpaf13n7/7/

所以我猜你正在寻找的数据是li.val()。

如果您编辑选择选项，则不会有值。

希望对你有所帮助。

【讨论】：