javascript - 从填充列表中获取选定的选项 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);">