如何在javascript变量中获取jquery select2选定值[重复]

Posted 2023-05-07

【中文标题】如何在javascript变量中获取jquery select2选定值[重复]

【英文标题】：how to get jquery select2 selected value in javascript variable [duplicate]

【发布时间】：2018-04-17 00:06:07

【问题描述】：

我正在使用多个 jquery select2

在我的html中

<select class="select2_demo_3 form-control" style="color: #1c84c6" id="selectSubject" name="selectSubject">
<option value="">Select a Subject</option>
<?php
$query= "SELECT * FROM `tblsubject` WHERE `status`='1'";
$found=mysqli_query($con,$query);
while($row = mysqli_fetch_array($found))
?>
<option value="<?php echo($row['id']);?>"><?php echo($row['subject_name']);?></option>
<?php

?>

<select class="select2_demo_3 form-control" id="selectTopic" name="selectTopic">
<option value="">Select a Topic</option>
<?php
$query= "SELECT * FROM `tbltopic` WHERE `status`='1'";
$found=mysqli_query($con,$query);
while($row = mysqli_fetch_array($found))
    ?>
    <option value="<?php echo($row['id']);?>"><?php echo($row['topic_name']);?></option>
    <?php

?>

然后在我的脚本中以此类推

$(document).ready(function()
$(".select2_demo_3").select2();
);

问题是虽然我在每个 select 的 id 标签中给出它，但在检查元素时，我得到了一个不同的 id，我认为它是由 jquery 在内部设置的。 screenshot of inspect

如您所见，它显示了我给定的 id，即“selectSubject”，但是当我在我的脚本中编写时

    <script type="text/javascript">
        var questionType=document.getElementById("selectSubject").value;
    </script>

我来了

"Uncaught TypeError: Cannot read property 'value' of null" 错误

我做错了什么？我可以在 javascript 中获取 select2 值吗？或者什么是正确的方法？

当我使用多个 SELECT2 时，我希望通过 ID 或其他方式单独选择值。

已编辑：将 getElementById 中的 id 更正为“selectSubject”。

【问题讨论】：

selectQuestionType id 在哪里，您在第二次选择中将selectTopic 作为 id！

@Sanchit Patiyal，抱歉，这是一个愚蠢的错误。我已将其更改为正确的 id “selectSubject”，但仍然收到相同的错误“Uncaught TypeError: Cannot read property 'value' of null”

你是在body之前还是body标签之后写脚本？？

@Sanchit Patiyal 非常感谢。我很傻，我在body标签之前调用我的js，在body标签之后调用jquery。现在它工作得很好。非常感谢

【参考方案1】：

您收到"Uncaught TypeError: Cannot read property 'value' of null" error 是因为您的脚本在加载 DOM 之前正在运行。因此，当脚本运行时，它找不到导致document.getElementById("selectSubject") 为空值的元素。在正文之后移动脚本部分将解决您的问题。

<script>
  console.log("script before body tag: %o", document.getElementById("test")); // null
</script>
<div id="test">Hello World</div>
<script>
  console.log("script afterbody tag: %o", document.getElementById("test")); // <div id="test" ...
</script>