【问题标题】:Set value of Select option in Javascript在 Javascript 中设置 Select 选项的值
【发布时间】: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 示例中所示的方式生成

标签: javascript ajax


【解决方案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/

见:

【讨论】:

    【解决方案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/

      谢谢

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-07-01
        • 1970-01-01
        • 2018-11-12
        • 2014-11-27
        • 2012-08-03
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多