jQuery-Set dynamische Drop-Down-Wert

Question

Ich habe ein Drop-Down-

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

Unten ist der Code, von wo ich bin Füllung Werte in der 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); 
    }); 

ich einen Wert gesetzt werden soll im Dropdown-Menü. Wie kann ich den Dropdown-Wert mit jQuery einstellen?

Hier ist "responseitem" der Wert, den ich von einem Ajax-Aufruf bekomme, und ich möchte diesen Wert in das Dropdown-Menü setzen.

Ich habe versucht mit

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

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

Aber nichts für mich gearbeitet. Fehle ich etwas oder wo liege ich falsch? Wie erreiche ich das?

EDIT:

Auf Schaltfläche klicken Ereignis i in einer Tabelle erschaffe, dass diese Dropdown ist in einer in einer Spalte davon.

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); 
    }); 
} 

EDIT:

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

Dies ist eine korrekte Ausgabe in der Konsole zeigt:

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

Aber nicht in der jQuery UI.I nicht meine ganze Seite neu geladen werden soll. Ich möchte nur so aktualisieren, dass nur der Dropdown-Wert aktualisiert wird.

Answer 1

Wie Sie select2 Plugin verwenden, müssen Sie trigger change event bis nach Offensichtlich

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

den neuen Wert gesetzt, responseitem muss eine der #DropdownId ‚s Elemente sein.

Sie können mehr lesen über dieses here

aktualisieren

Wie Sie nicht genug Informationen in Ihrer Frage vorsah, mit jsonplaceholder.typicode.com, habe ich Demo Ihnen zu zeigen, wie Sie select Wert ändern können, nachdem ein ajax-Request (I verwendet select2 zu):

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

Sie werden sehen, nach 1 Sekunde der ausgewählte Wert von select wird Clementine Bauch geändert werden.

Scheint, wie Sie Ihre Frage aktualisiert, so dass Sie option innerhalb select fehlen, Ihren Code wie folgt ändern:

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