如何在 jQuery 中用 JSON 数据填充下拉列表作为 ajax 响应
How to populate dropdownlist with JSON data as ajax response in jQuery
在我的应用程序中，我有一个下拉列表。我想用来自 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 响应。但我没有得到 JSON 数据。
因此，请告诉我我的代码中是否有任何错误，以及如何使用上面的代码获取 JSON 数据并填充下拉列表。
尝试更改jquery方法变量，它可能会导致问题（即，您正在使用来自ajax回调的data变量，然后尝试将其分配给jquery方法中的item对象 - 更改为obj）：
$.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;
}
}
尝试如下
<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);
}
});
});
相关文章：
- 使用Ajax或JavaScript选择下拉列表选项后，在同一页面上执行PHP脚本
- ajax函数更改下拉列表值
- 从填充了 AJAX 的下拉列表中获取控制器的操作方法中的值
- 引导下拉列表动态 ajax 列表项
- ajax下拉列表
- 通过ajax选择下拉列表
- 设置 AJAX 调用和填充下拉列表
- 使用 ajax 和 JSP Servlet 根据选择的上一个下拉列表填充下拉列表
- PHP MySQL Ajax Depend下拉列表 - 如何在ajax中获取$_POST值
- 如何在 jQuery 中用 JSON 数据填充下拉列表作为 ajax 响应
- 使用 ajax 用 SQL 填充下拉列表
- Select2 以编程方式设置搜索词并打开包含相关结果的下拉列表(无 ajax 调用）
- Laravel 5 使用 Ajax 从级联下拉列表中的数据库中获取数据
- Ajax下拉列表，用于搜索输入以使用雅虎天气查找天气
- 如何使用 AJAX 根据两个下拉列表的值从数据库中检索数据
- 使用 Ajax 一次填充两个下拉列表
- 如何使用 jQuery 从 AJAX 生成的选择下拉列表中获取文本选项
- 如何在 ajax 中添加下拉列表的选项
- 使用 AJAX 和 ORACLE 以及不使用 php 填充下拉列表(选择 ）
- MVC 4 -级联下拉列表- Ajax JavaScript调用问题
