根据一个选择框中的选择填充另一个选择框- JQuery？
根据一个选择框中的选择填充另一个选择框- JQuery？
提问于 2011-05-03 02:48:16
我正在尝试根据在第一个选择框中所做的选择填充一个选择框。我在网上看过，发现了很多关于硬编码选项的有用信息，但我需要我的选项来自查询(就像coldfusion中的cfquery )。我知道cfquery是服务器端的，所以我不能在我的jquery中包含它，但是还有其他选择吗？
我使用了以下示例：
HTML：
<select id="counties">
<option> </option>
<option> somerset </option>
<option> hertfordshire </option>
</select>
<select id="towns" disabled="true">
</select>JS：
var countyTowns = [
["Bath", "Bristol"],
["Letchworth", "Hitchin"]
];
$("#counties").change(function() {
var county = this.selectedIndex - 1;
$("#towns").empty();
if (county === -1) {
$("#towns").attr("disabled", true);
} else {
var towns = countyTowns[county];
for (var i = 0; i < towns.length; i++) {
$("#towns").append($("<option></option>").text(towns[i]));
}
$("#towns").attr("disabled", false);
}
});我需要的是城镇是动态的，并能够从数据库中读取。
任何帮助都是非常感谢的！
谢谢
回答 3
Stack Overflow用户
发布于 2019-12-21 02:32:25
正如您提到的:城镇是动态的，并且能够从数据库中读取，您可以通过使用ajax传递动态数据来获得动态数据。
Ajax从控制器获取，以便从用户选择的基于数据库的国家/地区读取：
<script>
$(document).ready(function () {
$("#counties").on('change', function () {
var selectedItem = $(this).val();
var ddlStates = $("#towns"); // will be update after success ajax call
var statesProgress = $("#states-loading-progress");
statesProgress.show();
$.ajax({ // get states/towns from db from controller
cache: false,
type: "GET",
url: "@(Url.RouteUrl("GetStatesByCountryId"))",
data: { "countryId": selectedItem, "addSelectStateItem": "true" },
success: function (data) {
ddlStates.html('');
$.each(data, function (id, option) {
ddlStates.append($('<option></option>').val(option.id).html(option.name));
}); // populating result
statesProgress.hide(); // hide loader
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to retrieve states.');
statesProgress.hide();
}
});
});
});
</script>在控制器上：
public virtual IActionResult GetStatesByCountryId(string countryId, bool addSelectStateItem)
{
var model = _countryModelFactory.GetStatesByCountryId(countryId, addSelectStateItem);
return Json(model);
}然后，在Data access layer _countryModelFactory.GetStatesByCountryId()上，根据用户选择的国家/城镇，从数据库中获取towns/states。
更新:这是我从db (动态国家/城镇)中检索州/镇并将它们填充到我的代码中的selectbox的方式。
Stack Overflow用户
发布于 2020-01-16 14:53:48
尝尝这个
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#counties").change(function() {
if($(this).val()){
$("#towns").attr('disabled',false);
//var towns = countyTowns[county];
// for (var i = 0; i < towns.length; i++) {
// $("#towns").append($("<option></option>").text(towns[i]));
// }
optionText = 'Premium';
optionValue = 'premium';
$('#towns').append('<option value="${optionValue}">
${optionText}
</option>');
}
else {
$("#towns").attr('disabled',true);
$("#towns").empty();
}
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<select id="counties">
<option> </option>
<option> somerset </option>
<option> hertfordshire </option>
</select>
<select id="towns" disabled="true">
</select>
</body>
</html>Stack Overflow用户
发布于 2020-08-21 11:07:31
与使用AJAX调用收集的列表相比，使用编码到页面中的值列表既有好处，也有风险。
如果列表特别长，或者基于当前用户，AJAX调用是很好的。如果列表相对简单/较小，并且不太可能频繁更改，则硬编码列表可能是好的。
要使用硬编码列表，请使用以下代码：
var selectableValues = [
{
'title' : 'Words Starting With A' ,
'values' : [
'Apple' ,
'Aardvark' ,
'Alfalfa'
]
} ,
{
'title' : 'Words Starting With B' ,
'values' : [
'Banana' ,
'Beyond' ,
'Belong'
]
}
];
var $select_one = $select_two = false;
jQuery(function($){
$select_one = $('#select_one');
$select_two = $('#select_two');
// Populate Select One
$.each(selectableValues, function(k,v){
$select_one.append('<option value="'+k+'">'+v.title+'</option>');
});
$('option:first',$select_one).text('Select...');
$select_one.on('change',function(){
populateSelectTwo(this.value);
});
});
function populateSelectTwo( parentKey ){
$('option',$select_two).remove();
$select_two.append('<option value="">Select...</option>');
$.each(selectableValues[parentKey].values, function(k,v){
$select_two.append('<option value="'+k+'">'+v+'</option>');
});
}JSFiddle - https://jsfiddle.net/lucanos/8fy4m7vp/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5861090
复制相关文章
相似问题
腾讯云开发者
