当然有可行的实现方法！其实你只需要利用HTML <option> 标签的特性——value 属性负责传递给后端的实际数据，而标签内部的文本则是前端展示给用户的内容，把这两者分开处理就行。

你当前的代码把ID和供应商名称同时放到了value和显示文本里，现在只需要调整这两部分的内容：

修改后的代码如下：

<div class="col-xl-6 col-md-6 col-12 mb-1">
    <div class="form-group">
        <label for="supplier_id">Supplier</label>
        <select class="form-control" name="supplier_id">
            <?php 
            $sql = mysqli_query($con, "SELECT * FROM supplier ORDER BY id ASC");
            while($supplier = mysqli_fetch_array($sql)){ 
            ?>
                <option value="<?php echo $supplier['id']; ?>"><?php echo $supplier['name']; ?></option>
            <?php } ?>
        </select>
    </div>
</div>

关键修改点： #

• 把<option>的value属性改为仅输出供应商的ID：value="<?php echo $supplier['id']; ?>"，这样表单提交时，后端接收到的supplier_id就是对应的ID值，完全满足你的业务处理需求。
• 把<option>内部的显示文本改为仅输出供应商名称：<?php echo $supplier['name']; ?>，这样前端下拉框里就只会显示供应商名字，不会出现ID了。

这样调整后，用户在前端看到的是干净的供应商名称列表，而后端拿到的是对应的ID，完美兼顾了前端体验和后端业务逻辑~

内容的提问来源于stack exchange，提问作者Khairunnisa Syahfitri