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设置下拉值？

这里＆＃39; responseitem＆＃39;是我从某个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插件时，设置新值后需要trigger change event

$('#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。

似乎您已更新了问题，因此，您在option内遗失了select，请按以下方式更改您的代码：

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

jQuery设置动态下拉值

1 个答案: