从填充的列表中获取选定的选项 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的最佳方式。