javascript - 如何仅使用 Javascript 在 div 中显示整个选择元素

Question

我正在为一个项目编写代码，我希望能够在 div 中显示整个选择元素。

我无法在结果区域中输入代码，因为我从数据库调用大部分代码。我尝试在选择元素周围放置一个容器，但它仍然不起作用。我的工作中的选择元素是从数据库中调用的，并且数据库中有很多选择元素，这就是为什么我使用 '$x' 来使每个选择元素都是唯一的。我在线搜索了 stackoverflow 和其他论坛，但找不到与我的问题相关的答案。

//some code above here
    $x = 1;
while($row = $result->fetch_assoc()){
    $uidcheck = mysqli_num_rows($result);
     $catname = $row['name'];
     $catrefno = $row['refno'];
     echo '
  <label class="container"><input type="radio" name="catname[]" id="catname'.$x.'" value="'.$catname.'"> '.$catname.'
  <span class="checkmark"></span></label>
<div id="selectdiv'.$x.'"><select class="form-control itnames" name="itname[]" id="itname'.$x.'" required>
<option></option>';
$sql1 = "SELECT * FROM foodarea WHERE status!='deactive' and itcatname='$catname'";
$result1 = $conn->query($sql1);
$uidcheck1 = mysqli_num_rows($result1);
if ($uidcheck1 > 0){
while($row1 = $result1->fetch_assoc()){
    $uidcheck1 = mysqli_num_rows($result1);
     $itname = $row1['itname'];
     echo '<option>'.$itname.'</option>';
    }
}
echo '</select></div>
<script>document.getElementById("catname'.$x.'").onchange = function() {
    var itnames = document.getElementById("selectdiv'.$x.'").innerHTML;
    var selectarea = document.getElementById("selectarea");
    selectarea.innerHTML = !this.checked ? "none" : itnames;
};</script>';
$x++;
}
}
echo '<div id="selectarea"></div>'

我希望单击单选按钮时，id 为 "itname'.$x.'" 的整个选择元素将显示在 id 为 "selectarea"的 div 中。但事实并非如此。相反，它显示第一个选项的值或 JavaScript 错误。我是初学者，非常感谢您的帮助。

Answer 1

这里可能有错误

<div class="selectdiv'.$x.'">

应该是一个id

<div id="selectdiv'.$x.'">