Question

我有一些JavaScript生成的html代码。 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

您使用一种非常奇怪的方式来创建选项-创建一个选项，然后将一个选项字符串作为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 2

您创建了选项newSelect，然后尝试在其中插入错误的地方innerHTML。
这是您应该做的。

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

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>

jQuery .val（）不返回选项标签的值

5 个答案: