使用 jQuery 根据第一个选择列表选项更改第二个选择列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10570904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery to change a second select list based on the first select list option
提问by Randy
I have two selects:
我有两个选择：
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
How do I do that with jQuery if I choose Fruit in the first select? The second select would show me only Fruits - Banana, Apple, Orange. If I choose Bird in the first select, the second select would show me only Birds - Eagle, Hawk. And so on...
如果我在第一次选择中选择 Fruit，我该如何使用 jQuery 做到这一点？第二个选择将只显示水果 - 香蕉、苹果、橙子。如果我在第一个选择中选择 Bird，第二个选择将只显示 Birds - Eagle、Hawk。等等...
I tried to do it with this piece of jQuery code:
我试图用这段 jQuery 代码来做到这一点：
$("#select1").change(function() {
var id = $(this).val();
$('#select2 option[value!='+id+']').remove();
});
Unfortunately, it removes almost everything, and I have no idea how to bring back some options. I also read something about clone, but I don't know how to use it in this case.
不幸的是，它几乎删除了所有内容，我不知道如何恢复一些选项。我也读了一些关于克隆的东西，但我不知道在这种情况下如何使用它。
回答by sabithpocker
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>Using jQuery data()to store data
使用 jQuery data()存储数据
I guess hiding elements doesn't work cross-browser(2012), I have'nt tested it myself.
我想隐藏元素在跨浏览器（2012）中不起作用，我自己还没有测试过。
回答by Xitalogy
I wanted to make a version of this that uses $.getJSON() from a separate JSON file.
我想制作一个使用 $.getJSON() 来自单独的 JSON 文件的版本。
Demo: here
演示：这里
JavaScript:
JavaScript：
$(document).ready(function () {
"use strict";
var selectData, $states;
function updateSelects() {
var cities = $.map(selectData[this.value], function (city) {
return $("<option />").text(city);
});
$("#city_names").empty().append(cities);
}
$.getJSON("updateSelect.json", function (data) {
var state;
selectData = data;
$states = $("#us_states").on("change", updateSelects);
for (state in selectData) {
$("<option />").text(state).appendTo($states);
}
$states.change();
});
});
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<select id="us_states"></select>
<select id="city_names"></select>
<script type="text/javascript" src="updateSelect.js"></script>
</body>
</html>
JSON:
JSON：
{
"NE": [
"Smallville",
"Bigville"
],
"CA": [
"Sunnyvale",
"Druryburg",
"Vickslake"
],
"MI": [
"Lakeside",
"Fireside",
"Chatsville"
]
}
回答by billyonecan
Store all #select2's options in a variable, filter them according to the value of the chosen option in #select1, and set them using .html()in #select2:
将 all#select2的选项存储在一个变量中，根据 中所选选项的值过滤它们#select1，并使用.html()in设置它们#select2：
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' );
$select1.on('change', function() {
$select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');
Here's a fiddle
这是一把小提琴
回答by Tom McGee
I built on sabithpocker's idea and made a more generalized version that lets you control more than one selectbox from a given trigger.
我以 sabithpocker 的想法为基础，制作了一个更通用的版本，让您可以从给定的触发器中控制多个选择框。
I assigned the selectboxes I wanted to be controlled the classname "switchable," and cloned them all like this:
我为我想要控制的选择框分配了类名“可切换”，并像这样克隆了它们：
$j(this).data('options',$j('select.switchable option').clone());
and used a specific naming convention for the switchable selects, which could also translate into classes. In my case, "category" and "issuer" were the select names, and "category_2" and "issuer_1" the class names.
并为可切换选择使用了特定的命名约定，这也可以转换为类。在我的例子中，“category”和“issuer”是选择名称，“category_2”和“issuer_1”是类名。
Then I ran an $.each on the select.switchable groups, after making a copy of $(this) for use inside the function:
然后我在 select.switchable 组上运行了 $.each，在复制了 $(this) 以在函数内部使用后：
var that = this;
$j("select.switchable").each(function() {
var thisname = $j(this).attr('name');
var theseoptions = $j(that).data('options').filter( '.' + thisname + '_' + id );
$j(this).html(theseoptions);
});
By using a classname on the ones you want to control, the function will safely ignore other selects elsewhere on the page (such as the last one in the example on Fiddle).
通过在您想要控制的那些上使用类名，该函数将安全地忽略页面上其他地方的其他选择（例如 Fiddle 示例中的最后一个）。
Here's a Fiddlewith the complete code:
回答by Bob Bozorgi
All of these methods are great. I have found another simple resource that is a great example of creating a dynamic form using "onchange" with AJAX.
所有这些方法都很棒。我发现了另一个简单的资源，它是使用“onchange”和 AJAX 创建动态表单的一个很好的例子。
http://www.w3schools.com/php/php_ajax_database.asp
http://www.w3schools.com/php/php_ajax_database.asp
I simply modified the text table output to anther select dropdown populated based on the selection of the first drop down. For my application a user will select a state then the second dropdown will be populated with the cities for the selected state. Much like the JSON example above but with php and mysql.
我只是将文本表输出修改为基于第一个下拉列表的选择填充的另一个选择下拉列表。对于我的应用程序，用户将选择一个州，然后第二个下拉列表将填充所选州的城市。很像上面的 JSON 示例，但使用 php 和 mysql。
回答by Moiz Ahmad
I have found the solution as followiing... working for me perfectly :)
我找到了以下解决方案......完美地为我工作:)
$(document).ready(function(){
$("#selectbox1").change(function() {
var id = $(this).val();
$("#selectbox2").val(id);
}); });
回答by Fezal halai
Try to use it:
尝试使用它：
Drop-down box dependent on the option selected in another drop-down box. Use jQuery to change a second select list based on the first select list option.
下拉框取决于在另一个下拉框中选择的选项。使用 jQuery 更改基于第一个选择列表选项的第二个选择列表。
<asp:HiddenField ID="hdfServiceId" ClientIDMode="Static" runat="server" Value="0" />
<asp:TextBox ID="txtOfferId" CssClass="hidden" ClientIDMode="Static" runat="server" Text="0" />
<asp:HiddenField ID="SelectedhdfServiceId" ClientIDMode="Static" runat="server" Value="0" />
<asp:HiddenField ID="SelectedhdfOfferId" ClientIDMode="Static" runat="server" Value="0" />
<div class="col-lg-2 col-md-2 col-sm-12">
<span>Service</span>
<asp:DropDownList ID="ddlService" ClientIDMode="Static" runat="server" CssClass="form-control">
</asp:DropDownList>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<span>Offer</span>
<asp:DropDownList ID="ddlOffer" ClientIDMode="Static" runat="server" CssClass="form-control">
</asp:DropDownList>
</div>
Use jQuery library in your web page.
在您的网页中使用 jQuery 库。
<script type="text/javascript">
$(document).ready(function () {
ucBindOfferByService();
$("#ddlOffer").val($('#txtOfferId').val());
});
$('#ddlOffer').on('change', function () {
$("#txtOfferId").val($('#ddlOffer').val());
});
$('#ddlService').on('change', function () {
$("#SelectedhdfOfferId").val("0");
SetServiceIds();
var SelectedServiceId = $('#ddlService').val();
$("#SelectedhdfServiceId").val(SelectedServiceId);
if (SelectedServiceId == '0') {
}
ucBindOfferByService();
SetOfferIds();
});
function ucBindOfferByService() {
GetVendorOffer();
var SelectedServiceId = $('#ddlService').val();
if (SelectedServiceId == '0') {
$("#ddlOffer").empty();
$("#ddlOffer").append($("<option></option>").val("0").html("All"));
}
else {
$("#ddlOffer").empty();
$(document.ucVendorServiceList).each(function () {
if ($("#ddlOffer").html().length == "0") {
$("#ddlOffer").append($("<option></option>").val("0").html("All"));
}
$("#ddlOffer").append($("<option></option>").val(this.OfferId).html(this.OfferName));
});
}
}
function GetVendorOffer() {
var param = JSON.stringify({ UserId: $('#hdfUserId').val(), ServiceId: $('#ddlService').val() });
AjaxCall("DemoPage.aspx", "GetOfferList", param, OnGetOfferList, AjaxCallError);
}
function OnGetOfferList(response) {
if (response.d.length > 0)
document.ucVendorServiceList = JSON.parse(response.d);
}
function SetServiceIds() {
var SelectedServiceId = $('#ddlService').val();
var ServiceIdCSV = ',';
if (SelectedServiceId == '0') {
$('#ddlService > option').each(function () {
ServiceIdCSV += $(this).val() + ',';
});
}
else {
ServiceIdCSV += SelectedServiceId + ',';
}
$("#hdfServiceId").val(ServiceIdCSV);
}
function SetOfferIds() {
var SelectedServiceId = $('#ddlService').val();
var OfferIdCSV = ',';
if (SelectedServiceId == '0') {
$(document.ucVendorServiceList).each(function () {
OfferIdCSV += this.OfferId + ',';
});
}
else {
var SelectedOfferId = $('#ddlOffer').val();
if (SelectedOfferId == "0") {
$('#ddlOffer > option').each(function () {
OfferIdCSV += $(this).val() + ',';
});
}
else {
OfferIdCSV += SelectedOfferId + ',';
}
}
}
</script>
Use Backend code in your web page.
在您的网页中使用后端代码。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ServiceList();
}
}
public void ServiceList()
{
ManageReport manageReport = new ManageReport();
DataTable ServiceList = new DataTable();
ServiceList = manageReport.GetServiceList();
ddlService.DataSource = ServiceList;
ddlService.DataTextField = "serviceName";
ddlService.DataValueField = "serviceId";
ddlService.DataBind();
ddlService.Items.Insert(0, new ListItem("All", "0"));
}
public DataTable GetServiceList()
{
SqlParameter[] PM = new SqlParameter[]
{
new SqlParameter("@Mode" ,"Mode_Name" ),
new SqlParameter("@UserID" ,UserId )
};
return SqlHelper.ExecuteDataset(new SqlConnection(SqlHelper.GetConnectionString()), CommandType.StoredProcedure, "Sp_Name", PM).Tables[0];
}
[WebMethod]
public static String GetOfferList(int UserId, String ServiceId)
{
var sOfferList = "";
try
{
CommonUtility utility = new CommonUtility();
ManageReport manageReport = new ManageReport();
manageReport.UserId = UserId;
manageReport.ServiceId = ServiceId;
DataSet dsOfferList = manageReport.GetOfferList();
if (utility.ValidateDataSet(dsOfferList))
{
//DataRow dr = dsEmployerUserDepartment.Tables[0].NewRow();
//dr[0] = "0";
// dr[1] = "All";
//dsEmployerUserDepartment.Tables[0].Rows.InsertAt(dr, 0);
sOfferList = utility.ConvertToJSON(dsOfferList.Tables[0]);
}
return sOfferList;
}
catch (Exception ex)
{
return "Error Message: " + ex.Message;
}
}
public DataSet GetOfferList()
{
SqlParameter[] sqlParameter = new SqlParameter[]
{
new SqlParameter("@Mode" ,"Mode_Name" ),
new SqlParameter("@UserID" ,UserId ),
new SqlParameter("@ServiceId" ,ServiceId )
};
return SqlHelper.ExecuteDataset(new SqlConnection(SqlHelper.GetConnectionString()), CommandType.StoredProcedure, "Sp_Name", sqlParameter);
}
回答by Cinthiya Singh
On the selected answer I see that when initially the page is loaded the selection of first option is prior fixed and therefore gives the option of all the categories in selection 2.
You can avoid that by adding the first option as the following in both the select tag:- <option value="none" selected disabled hidden>Select an Option</option>
在选定的答案中，我看到当最初加载页面时，第一个选项的选择是预先固定的，因此在选择 2 中提供了所有类别的选项。您可以通过在两个选择中添加第一个选项来避免这种情况，如下所示标签：- <option value="none" selected disabled hidden>Select an Option</option>
<select name="select1" id="select1">
<option value="none" selected disabled hidden>Select an Option</option>
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="none" selected disabled hidden>Select an Option</option>
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
