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.I

但不是不想刷新我的整个页面。我只是想刷新，只有下拉值刷新。

Answer 1

当你使用select2插件，你需要trigger change event后成立的新值

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

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

你可以阅读更多有关here

更新

由于您没有在你的问题提供足够的信息，使用jsonplaceholder.typicode.com，我创建演示，告诉你如何可以改变后价值select Ajax请求（我用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>';