jQuery .val() doesnt return the value of an option tag

Question

I have some JavaScript-generated html code. The JavaScript generates the elements (option) in a drop down list (select). I then want to get the value of the selected option '1', however instead 'test' is returned.

The html is generated using:

var newSelect = document.createElement('option');
selectHTML = "<option value=\"" + 1 + "\">" + test + "</option>";
newSelect.innerHTML = selectHTML;
document.getElementById('siteID').add(newSelect);

I have then tried the following methods to get the value of the selected option:

var siteId = $('#siteID').val(); // returns 'test'
var siteId2 = $('#siteID').data("value"); // returns undefined
var siteId3 = $('#siteID').attr("value"); // returns undefined
var siteId4 = $('#siteID').prop("value"); // returns 'test'

Answer 1

You are using a very strange way to create your option - you create an option and then insert an option string as innerHTML

Fixed code (see example later)

var opt = document.createElement('option');
opt.value=1;
opt.text="test"
document.getElementById('siteID').appendChild(opt);

Also you do not actually select the option, so the value will be whatever the browser thinks is selected

Why not use jQuery?

 $("<option />", { value: 1, text: "test" }).appendTo('#siteID1') $('#siteID1').prop("selectedIndex", 1); // NOW the value is 1 console.log( $('#siteID1').val() ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="siteID1"> <option value="">Please select</option> </select> 

Your code:

 var test ="Test"; var newSelect = document.createElement('option'), selectHTML = "<option value=\\"" + 1 + "\\">" + test + "</option>"; newSelect.innerHTML = selectHTML; document.getElementById('siteID').add(newSelect); console.log(document.getElementById('siteID').outerHTML) 

 <select id="siteID"> </select> 

Your FIXED code

 var opt = document.createElement('option'); opt.value=1; opt.text="test" document.getElementById('siteID').appendChild(opt); console.log(document.getElementById('siteID').value, $('#siteID').val()) console.log(document.getElementById('siteID').outerHTML) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="siteID"> </select> 

Answer 2

You created the option newSelect then you try to insert an option inside of it with innerHTML which is where you went wrong.
This is what you should have done.

var newSelect = document.createElement('option');
newSelect.innerHTML = 'test';
newSelect.value= '1';
document.getElementById('siteID').add(newSelect);

Answer 3

You need remove //selectHTML = "<option value=" + 1 + ">" + test + "</option>";

And change to newSelect.value = 1; for add value to option by javascript

newSelect.innerHTML = test;
newSelect.value = 1;

 var newSelect = document.createElement('option'); var test = 'test'; //selectHTML = "<option value=" + 1 + ">" + test + "</option>"; newSelect.innerHTML = test; newSelect.value = 1; document.getElementById('siteID').appendChild(newSelect); $(document).ready(function(){ var siteId = $('#siteID').val(); // r console.log(siteId); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id='siteID'> </select> 

Answer 4

Please try this

 var test = 'test'; selectHTML = "<option value=\\"" + 1 + "\\">" + test + "</option>"; $("#siteID").append(selectHTML); var siteId = $('#siteID').val(); console.log(siteId); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="siteID"></select> 

Answer 5

You can first create the Select tag and after that try to append the option tag. I have attached the code as below:

 // create the select tag and append with the main div tag var string = '<select id="dropdown_tag"></select>'; $("#test").append(string); // create as many option you want and append with the select tag var newSelect = document.createElement('option'); selectHTML = "<option>---select---</option>"; selectHTML += "<option value='1'>1</option>"; selectHTML += "<option value='2'>2</option>"; $("#dropdown_tag").append(selectHTML); // Onchange event of dropdown tag $(document).on('change',"#dropdown_tag", function() { alert($(this).val()); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Dropdowm:<div id='test'></div>