从填充列表中获取选定的选项ID

Question

我有一个从MySQL填充的单选按钮列表。 所选单选按钮更改时要调用的功能。 我想获得所选商品的ID。

 <ul id="radio" class="input-list">
<?php
$stmt = mysqli_prepare($link, "SELECT id, name, price FROM cases ORDER BY price");
$stmt->execute();
$stmt->bind_result($case_id, $case_name, $case_price);
while($stmt->fetch()) {
echo '<li>
<input class="selectedoptions" id="'.$case_id.'" name="config-case" value="'.$case_price.'" type="radio" onchange="updateImage(this.id);">
<label class="sub-label" for="'.$case_id.'">'.$case_name.'         [£'.$case_price.']</label>
</li>';
}
$stmt->close();
>
</ul>

JS：

<script>

    function updateImage(caseid) {

        var selectmenuID = document.getElementById(caseid);
        console.log(selectmenuID);
    }

<script>

尝试获取所选项目的ID失败。 这是控制台输出：

<input class="selectedoptions" id="32" name="config-case" value="24"
type="radio" onchange="updateImage(this.id);">

我想获取32（ID）。 我怎样才能做到这一点？ 谢谢，

Answer 1

您的代码是正确的。 唯一的事实是您正在控制台中登录DOM元素，而不是获取caseid的参数，该值是该元素的ID属性。

看一个例子：

 function updateImage(caseid) { var selectmenuID = document.getElementById(caseid); console.log(`Clicked on radio input with id:${caseid}`); } 

 <ul id="radio" class="input-list"> <li> <input class="selectedoptions" id="1" name="config-case" value="'.$case_price.'" type="radio" onchange="updateImage(this.id);"> <label class="sub-label" for="'.$case_id.'">Element with ID 1</label> </li> <li> <input class="selectedoptions" id="2" name="config-case" value="'.$case_price.'" type="radio" onchange="updateImage(this.id);"> <label class="sub-label" for="'.$case_id.'">Element with ID 2</label> </li> <li> <input class="selectedoptions" id="3" name="config-case" value="'.$case_price.'" type="radio" onchange="updateImage(this.id);"> <label class="sub-label" for="'.$case_id.'">Element with ID 3</label> </li> </ul> <input class="selectedoptions" id="32" name="config-case" value="24" type="radio" onchange="updateImage(this.id);"> 

Answer 2

也许这可以帮助您：

<script>
    function updateImage(caseid) {

        const selectmenuID = document.getElementById(caseid);
        const id  = selectmenuID.options[e.selectmenuID].value;

        // console your answer
        console.log(id);
    }
<script>

这是使用javascript的最佳方法。