CodeIgniter下拉选框如何同时获取两个<option>值？

嘿，我来帮你梳理下问题出在哪，以及怎么解决～

首先得指出你原来代码里的两个关键错误：

1. HTML标签无效：你给<option>写了两个value属性，这在HTML里是不允许的——浏览器只会识别最后一个value，所以你的选项实际值只有$group->name，根本没把stok存进去。
2. JS逻辑错误：document.getElementById("nama").value返回的是选中选项的字符串值，不是数组或对象，你用value['$group->stok']这种方式去取值，自然会得到undefined。

接下来给你两种可行的解决方法，推荐第一种更优雅的方案：

方法一：使用HTML5 Data属性（推荐） #

这种方法可以把额外的数据（比如stok）存在option的自定义data属性里，逻辑清晰，不会和value冲突。

第一步：修正PHP生成的Option代码 #

把原来重复的value属性改成data-stok，用来存储库存值：

<div class="form-group"> 
 <label>Nama Barang</label> 
 <div class="form-inline"> 
 <select id="nama" class="form-control namabarangsearch col-sm-10" name="name" required onchange="getNamaTransaksi()"> 
 <option value="">-- Nama Barang --</option> 
 <?php foreach ($groups as $group) { 
     echo '<option value="' . $group->name . '" data-stok="' . $group->stok . '">' . $group->name . '. Stok : ' . $group->stok . '</option>'; 
 } ?> 
 </select> 
 </div> 
 <small class="form-text text-muted" id="sisa"></small> 
</div>

第二步：修改JS函数获取两个值 #

现在可以直接从选中的option元素里拿到value（对应商品名称）和data-stok（对应库存）：

function getNamaTransaksi() {
    // 获取当前选中的option元素
    const selectedOpt = document.getElementById("nama").selectedOptions[0];
    // 从value取商品名称，从data-stok取库存
    const nama = selectedOpt.value;
    const stok = selectedOpt.dataset.stok;
    
    // 把两个值显示到页面上
    document.getElementById("sisa").innerHTML = `Nama barang : ${nama}, Sisa stok : ${stok}`;
}

方法二：拼接值到Option的Value中 #

如果不想用data属性，也可以把name和stok用一个不会冲突的分隔符（比如|）拼接成字符串作为value，然后在JS里拆分：

第一步：修改PHP生成的Option #

<div class="form-group"> 
 <label>Nama Barang</label> 
 <div class="form-inline"> 
 <select id="nama" class="form-control namabarangsearch col-sm-10" name="name" required onchange="getNamaTransaksi()"> 
 <option value="">-- Nama Barang --</option> 
 <?php foreach ($groups as $group) { 
     // 用|拼接name和stok作为value
     $combinedVal = $group->name . '|' . $group->stok;
     echo '<option value="' . $combinedVal . '">' . $group->name . '. Stok : ' . $group->stok . '</option>'; 
 } ?> 
 </select> 
 </div> 
 <small class="form-text text-muted" id="sisa"></small> 
</div>

第二步：修改JS函数拆分值 #

function getNamaTransaksi() {
    const combinedVal = document.getElementById("nama").value;
    if (combinedVal) {
        // 拆分字符串得到name和stok
        const [nama, stok] = combinedVal.split('|');
        document.getElementById("sisa").innerHTML = `Nama barang : ${nama}, Sisa stok : ${stok}`;
    } else {
        // 选中默认选项时清空提示
        document.getElementById("sisa").innerHTML = '';
    }
}

⚠️ 注意：第二种方法要确保你的name字段里不会出现分隔符（比如|），否则拆分逻辑会出错，所以更推荐第一种data属性的方案哦～

内容的提问来源于stack exchange，提问作者Angel Dust