jQuery .val () не возвращает значение тега параметра

Question

У меня есть некоторый HTML-код, сгенерированный JavaScript.JavaScript генерирует элементы (опция) в раскрывающемся списке (выберите).Затем я хочу получить значение выбранной опции '1', но вместо этого возвращается 'test'.

HTML генерируется с использованием:

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

Затем я попробовал следующееСпособы получения значения выбранного параметра:

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

Вы создали опцию newSelect, затем пытаетесь вставить в нее опцию с innerHTML, в которой вы ошиблись.
Это то, что вы должны были сделать.

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

Answer 2

Вы используете очень странный способ создания своей опции - вы создаете опцию, а затем вставляете строку опции как innerHTML

Фиксированный код (см. Пример позже)

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

Кроме того, вы на самом деле не выбираете опцию, поэтому значение будет таким, как считает браузер.

Почему бы не использовать 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>

Ваш код:

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>

Ваш ИСПРАВЛЕННЫЙ код

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 3

Вам нужно удалить //selectHTML = "<option value=" + 1 + ">" + test + "</option>";

И изменить на newSelect.value = 1; для добавления значения к опции с помощью 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

Пожалуйста, попробуйте это

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

Вы можете сначала создать тег Select, а затем попытаться добавить тег option. Я приложил код, как показано ниже:

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