在我的应用程序中，我有一个下拉列表。我想使用 Ajax 响应中的 JSON 数据填充此下拉列表。
下面是我的代码：
服务器发送的JSON数据：
{
"aaData": [
{
"value": "login1",
"text": "kapils"
},
{
"value": "login2",
"text": "davidn"
},
{
"value": "login3",
"text": "alanp"
}
]
}
下面是我的客户端代码，它生成ajax请求：
（使用 $.ajax() ）：
<script type="text/javascript">
$(document).ready(function()
{
$('#id_trial').click(function() {
alert("entered in trial button code");
$.ajax({
type: "GET",
url:"/demo_trial_application/json_source",
dataType: "json",
success: function (data) {
$.each(data.aaData,function(i,data)
{
alert(data.value+":"+data.text);
var div_data="<option value="+data.value+">"+data.text+"</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
}
});
});
});
</script>
<body>
<div id="div_source1">
<select id="ch_user1" >
<option value="select"></option>
</select>
</div>
<input type="button" id="id_trial" name="btn_trial" value="Trial Button..">
</body>
或使用 ($.getJSON()) :
$.getJSON("/demo_trial_application/json_source", function (data) {
$.each(data.aaData, function (i, data) {
var div_data = "<option value=" + data.value + ">" + data.text + "</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
});
现在，当我单击按钮（#id_Trial）时，服务器端代码成功执行，并创建 JSON 对象，但我没有使用 jQuery 的 ajax 调用在 Success 参数的回调函数中获得“JSON 响应”。
我还尝试使用
$.getJSON所以请告诉我我的代码是否有任何错误，以及如何使用上面的代码获取 JSON 数据并填充下拉列表。
尝试更改jquery方法变量，它可能会导致问题（即，您正在使用来自ajax回调的
dataitemobj $.ajax({
type: "GET",
url:"/demo_trial_application/json_source",
dataType: "json",
success: function (data) {
$.each(data.aaData,function(i,obj)
{
alert(obj.value+":"+obj.text);
var div_data="<option value="+obj.value+">"+obj.text+"</option>";
alert(div_data);
$(div_data).appendTo('#ch_user1');
});
}
});
});
我用“for”
var List;
jQuery.ajax({
url: "/demo_trial_application/json_source",
type: "POST",
dataType: "json",
async: false,
success: function (data) {
List = data.aaData
$('#ch_user1').empty();
$('#ch_user1').append('<option value="">All</option>');
for (i in List ) {
$('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');
}
}
});
与 Laravel 合作，这是我的解决方案：
$("#YOUR_DIV").on("change", function(){
var selected = $(this).val();
makeAjaxRequest(selected);
})
function makeAjaxRequest(opts){
$.ajax({
type: "GET",
url : '{{ action('YOUR_CONTROLLER@YOUR_FUNCTION') }}',
data: { opts: opts },
success: function(data) {
NEW_JS_FUNCTION(data);
}
});
}
function NEW_JS_FUNCTION(params) {
$('#YOUR_DIV').empty();
$('#YOUR_DIV').append('<option value="">ALL</option>');
params.forEach(function(entry){
$('#YOUR_DIV').append('<option value="' + entry.KEY+ '">' + entry.TEXT + '</option>');
});
}
它有效。希望这能有所帮助。
我们可以像下面一样填充下拉菜单。我想这对你们来说都很容易。
var options = $("#options");
$.getJSON("/Country/GetAll/", function(response) {
$.each(response, function() {
options.append($("<option />").val(this.Id).text(this.Name));
});
});
<div class="col-lg-4">
<%--<input type="text" class="form-control" id="txtGender" />--%>
<select class='form-control DropDown' id="txtGender"></select>
</div>
--------------------------------------------------------------------------------
$(document).ready(function () {
$.ajax({
type: "POST",
url: "AjaxCallGrid.asmx/GetDropDown",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('.DropDown').empty();
$('.DropDown').append("<option value='0'>---Select---</option>");
$.each(result.d, function (key, value) {
$('.DropDown').append($("<option></option>").val(value.iD).html(value.firstName));
});
}
});
});
-------------------------------------------------------------------------
[WebMethod]
public List<Students> GetDropDown()
{
DataTable dt = new DataTable();
List<Students> result = new List<Students>();
using (SqlConnection con = new SqlConnection(@"Data Source=DOS-PC\MARJI;Initial Catalog=examples;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand("select id,firstname from Students ", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
result.Add(new Students
{
iD = Convert.ToInt32(dt.Rows[i]["id"].ToString()),
firstName = dt.Rows[i]["firstname"].ToString()
}
);
}
}
return result;
}
}
最简单的方法是下载这个库https://github.com/JocaPC/jquery-view-engine/tree/master/src。这个 JQuery 库直接将 JSON 加载到下拉列表中，看起来非常适合您的示例。您只需输入以下代码：
success: function (data) {
$('#ch_user1').view(data.aaData);
}
查看此页面https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown了解更多详细信息。
尝试如下
<select id="xxx"></select>
success: function (response) {
for (var i = 0; i < response.length; i++) {
$("#xxx").append("<option value='" + response[i]["id"] + "'>" + response[i]["name"] + "</option>");
}
}
您可以这样做：
$(".ddEvent").on('change', function(e){
const selectedEvent = $(this).val();
$("#ddExhibitor").empty();
$("#ddExhibitor").append("<option value='-1'>-- Choose Exhibitor --</option>");
$.ajax({
url: '/dashboard/get-exhibitors/'+selectedEvent,
type: 'GET',
success: function success(data) {
if(data.exhibitors.length > 0){
data.exhibitors.forEach(exhibitor => {
$("#ddExhibitor").append("<option value='" + exhibitor.id + "'>" + exhibitor.exhibitor_name + "</option>");
});
}
},
error: function error(err) {
alert(data.error);
}
});
});