CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
Hdot
Hdot

Reputation: 593

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

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'

Upvotes: 4

Views: 152

Answers (5)

mplungjan
mplungjan

Reputation: 178403

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>

Upvotes: 2

Hien Nguyen
Hien Nguyen

Reputation: 18973

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>

Upvotes: 0

Alok Mali
Alok Mali

Reputation: 2881

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>

Upvotes: 0

Shivani Sonagara
Shivani Sonagara

Reputation: 1307

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>

Upvotes: -1

Musa
Musa

Reputation: 97717

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

Upvotes: 2

Related Questions