how to get jquery select2 selected value in javascript variable

Question

i am using multiple numbers of jquery select2

in my 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
}
?>

and so on then in my script

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

the problem is though i am giving it in id tag of each select , on inspecting the element i am getting a different id which is being set by jquery internally i think. screenshot of inspect

as you can see it shows my given id which is "selectSubject" but when i am writing in my script

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

i am getting

"Uncaught TypeError: Cannot read property 'value' of null" error

what am i doing wrong? can i get select2 value in javascript? or what is the right way to do it?

AS I AM USING MULTIPLE NUMBERS OF SELECT2 I WANT INDIVIDUAL SELECT VALUE BY ID OR SOME OTHER WAY.

edited: corrected the id in getElementById to "selectSubject".

where is `selectQuestionType` id you have `selectTopic` as id in second select!! — Sanchit Patiyal, Nov 04 '17 at 11:20
@Sanchit Patiyal, sorry that was a silly mistake. i have changed it to the correct id "selectSubject" but still getting the same error "Uncaught TypeError: Cannot read property 'value' of null" — rajesh, Nov 04 '17 at 11:35
you are writing script before the body or after the body tag?? — Sanchit Patiyal, Nov 04 '17 at 11:36
@Sanchit Patiyal thanks a lot . it was very very silly of me, i was calling my js before body tag and jquery after body tag. now its working perfectly.thanks a lot — rajesh, Nov 04 '17 at 11:48

score 0 · Accepted Answer · answered Nov 04 '17 at 11:53

You are getting "Uncaught TypeError: Cannot read property 'value' of null" error because your script is running before you DOM is getting loaded. So due to which when the script runs it can't find the Element resulting into document.getElementById("selectSubject") as null value. Moving your script part after the body will solve your problem.

<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>

how to get jquery select2 selected value in javascript variable

1 Answers1