在 Javascript 中设置 Select 选项的值

Posted 2023-02-16

【中文标题】在 Javascript 中设置 Select 选项的值

【英文标题】：Set value of Select option in Javascript

【发布时间】：2014-09-11 00:19:12

【问题描述】：

是否有任何功能可以设置<select> 标签选项的值？我有一个 ajax 响应数组，我想把这个数组放在 <select> 标记中。

这是我的代码：

$.ajax(
    type: "GET",
    url: "http://.......api/1/AbsenceType",
    dataType: "json", 
    success: function (data) 
        // It doesn't work
        var ind = document.getElementById('mySelect').selectedIndex;
        document.getElementById('mySelect').options.value="2";//
    
)

我的选择标签是：

<select id=mySelect name="mySelect" required="required" data-mini ="true" onchange="myFunction3();"/>
    <option id ="type" value=""></option>
</select>

【问题讨论】：

你是什么意思？ document.getElementById('mySelect').value="2";

你的意思是要改变option标签的值吗？

我想为选项标签添加值，它是空的，我想用来自 ajax 响应的数组填充它。

使用 $("#type").attr("value", 2);但是它只是将值分配给 1 个具有 id "type" 的选项标签，对于多个选项，您需要按照 Shail 示例中所示的方式生成

【参考方案1】：

我有一个 ajax 响应数组，我想把这个数组放在一个标签中。

为什么不直接将数组中的选项添加到选择中，然后设置选择的值，如下所示：

从空选择开始：

<select id="mySelect" name="mySelect">

</select>

然后将此函数用作回调：

var callback = function (data) 

    // Get select
    var select = document.getElementById('mySelect');

    // Add options
    for (var i in data) 
        $(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
    

    // Set selected value
    $(select).val(data[1]);

演示：

http://jsfiddle.net/M52R9/

见：

Adding options to a select using Jquery/javascript Set selected option of select box.

【参考方案2】：

您是否正在寻找类似的东西 -

DEMO

你可以像这样添加选项 -

$(function()
$("#mySelect").html('<option value="2">2</option>');
);

抱歉，我刚刚错过了您在 ajax callback 中进行的操作。我也在我的演示中更新了。

你也可以这样-

document.getElementById("mySelect").innerHTML = '<option value="2">2</option>';

为什么不添加新选项而不是在选项中添加值。

【参考方案3】：

试试这个...

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>`
</select>

$("select").val("3");

在此处访问现场演示：http://jsfiddle.net/y4B68/

谢谢