javascript - jQuery-设置动态下拉值

Question

我有一个下拉菜单

<select id="DropdownId" label="condition " ></select>

下面是代码，我从这里将值填充到下拉列表中:

var request = $.ajax({'url': '/getDropdownValues'}); 
request.done(function(response) 
{   
    response = JSON.parse(response)
    var processbyList=[]; 
    $.each(response, function(index, element) {
           processbyList.push(element.processby); 
    });
    $("#DropdownId").select2({
            data: processbyList
    });
    });
    request.fail(function(jqXHR, textStatus) 
    {
        alert('Request failed: ' + textStatus);
    });

我想在下拉列表中设置一个值。 如何使用 jQuery 设置下拉值？

这里的“responseitem”是我从某个ajax调用中获得的值，我希望将该值设置到下拉列表中。

我尝试过使用

1. `document.getElementById("DropdownId").value = responseitem;`

2.  `$('#DropdownId').val(responseitem);`

但对我来说没有任何作用。我错过了什么或者我错在哪里吗？如何实现这一目标？

编辑:

在按钮单击事件中，我正在创建一个表，该下拉列表位于其中的一列中。

function onButtonClick(){

// to fill values in dropdown
var request = $.ajax({'url': '/getDropdownValues'}); 
request.done(function(response) 
{   
    response = JSON.parse(response)
    var processbyList=[]; 
    $.each(response, function(index, element) {
       processbyList.push(element.processby); 
    });
    $("#DropdownId").select2({
        data: processbyList
    });
});
request.fail(function(jqXHR, textStatus) 
{
    alert('Request failed: ' + textStatus);
});

//this is again inside an ajax call
var requestRegex =$.ajax({url:'/Info',
                         data:"FieldName="+responseitem[0],
                         processData: true,
                         contentType: "application/json",
                         dataType:    "json",
                         });
requestRegex.done(function(responseRegex) 
{
    var panel=document.createElement("panel");  
    var h = '<div class="panel panel-default" >';
    h += '<div class="panel-heading fixed-panel">';
    h +='<h3 class="panel-title">'+responseitem[0]+'</h3>';
    h +='<span class="pull-right clickable"></span>';
    h += '</div>'; 
    h +='<div class="panel-body">';
    h += '<div class="table-responsive">';
    h +='<table id="' +"albums"+ '" cellspacing="0"  class="table-bordered table-hover specialCollapse>';
    h +='<thead></thead>';
    h +='<tbody id="' +"tbody"+ '">';

    h +='<tr>';
    h +='<td><h4><bold>Process By</bold></h4></td>';
    //h +='<td id="' +"processBy"+ '"><textarea class="form-control" rows="1" style="max-width: 30%;">'+ responseitem[2] + '</textarea></td>';
    h +='<td id="' +"processBy"+ '"><select id="DropdownId"  style="width:200px;" value="' +responseitem[2]+ '" ></select></td>';
    h +='</tr>';

    h +='</tbody>';
    h +='</table>';
    h += '</div></div>';

    panel.innerHTML = h;
    $("#DropdownId").select2();
    $("#DropdownId").val(responseitem[2]).trigger("change");

  });   
  request.fail(function(jqXHR, textStatus) 
  {
    alert('Request is failing: ' + textStatus);
  });
}   

编辑:

 document.getElementById("DropdownId").value=responseitem[2];

这在控制台中显示正确的输出:

document.getElementById("processbyDropdownId").value=responseitem[2];
 >>>"page"

但不在 jQuery UI 中。我不想刷新整个页面。我只想刷新以便仅刷新下拉值。

Answer 1

当您使用select2插件时，您需要在设置新值后触发更改事件

$('#DropdownId').val(responseitem).trigger('change');

显然，responseitem 必须是 #DropdownId 的项目之一。

您可以阅读更多相关信息 here

更新

由于您在问题中没有提供足够的信息，因此使用 jsonplaceholder.typicode.com ，我创建了演示来向您展示如何在 ajax 请求后更改 select 值(我也使用了 select2):

HTML

<select style="width: 200px;">
  <option value="1">Leanne Graham</option>
  <option value="2" selected="selected">Ervin Howell</option>
  <option value="3">Clementine Bauch</option>
</select>

JS

$("select").select2();

setTimeout(function() {
  $.ajax("https://jsonplaceholder.typicode.com/users", {
    type: "GET",
    success: function(res) {
      var id = -1;
      for (var i in res) {
        if (res[i].name == "Clementine Bauch") {
          id = res[i].id;
          break;
        }
      }

      $("select").val(id).trigger("change");
    }
  });
}, 1000);

Codepen

1 秒后您将看到 select 的选定值将更改为 Clementine Bauch。

似乎您更新了您的问题，因此，您在 select 中缺少 option，请按如下方式更改代码:

h += '<td id="' + "processBy" + '"><select id="DropdownId"  style="width:200px;"><option value="' + responseitem[2] + '">"' + responseitem[2] + '"</option></select></td>';