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>';