级联下拉列表 [英] Cascading dropdowns
本文介绍了级联下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我现在正在做的：
在aspx页面
<％：Html.DropDownListFor（model => model.ModelViewAd.Category1，Model.ModelViewAd.Category1List， - Väljkategori - ）％>
<％：Html.DropDownListFor（model => model.ModelViewAd.Category2，Model.ModelViewAd.Category2List， - Väljkategori - ）％>
<％：Html.DropDownListFor（model => model.ModelViewAd.Category3，Model.ModelViewAd.Category3List， - Väljkategori - ）％>
<％：Html.DropDownListFor（model => model.ModelViewAd.Category4，Model.ModelViewAd.Category4List， - Väljkategori - ）％>
这样呈现：
< select id =ModelViewAd_Category1name =ModelViewAd.Category1>
< option value => - V&＃228; lj kategori - < / option>
< option value =10> Fordon< / option>
< option value =15> F&＃246; r hemmet< / option>
< option value =17> Bostad< / option>
< / select>
< select id =ModelViewAd_Category2name =ModelViewAd.Category2>
< option value => - V&＃228; lj kategori - < / option>
< / select>
< select id =ModelViewAd_Category3name =ModelViewAd.Category3>
< option value => - V&＃228; lj kategori - < / option>
< / select>
< select id =ModelViewAd_Category4name =ModelViewAd.Category4>
< option value => - V&＃228; lj kategori - < / option>
< / select>
这是网页上的脚本如下所示：
< script type =text / javascript>
$（function（）{
$（select＃ModelViewAd_Category1）。change（function（）{
var id = $（this） （）;
var urlAction =/ AdCategory / GetCategoriesByParent1 /+ id;
$ .getJSON（urlAction，{id：id}，function（data）{
$（＃ModelViewAd_Category2 ）add（function（）{$ b $};
$ b $（select＃ModelViewAd_Category2）。 b var id = $（this）.val（）;
var urlAction =/ AdCategory / GetCategoriesByParent1 /+ id;
$ .getJSON（urlAction，{id：id}，function {
$（＃ModelViewAd_Category3）。addItems（data.d）;
}）;
}）;
$（select＃ModelViewAd_Category3 .change（function（）{
var id = $（t他）.VAL（）;
var urlAction =/ AdCategory / GetCategoriesByParent1 /+ id;
$ .getJSON（urlAction，{id：id}，function（data）{
$（＃ModelViewAd_Category4）。addItems（data.d）;
}）;
}）;
}）;
< / script>
然后我有一个包含此文件的文件：
$。fn.clearSelect = function（）{
return this.each（function（）{
if（this.tagName =='SELECT '）
this.options.length = 0;
}）;
}
$ .fn.addItems = function（data）{
return this.clearSelect（）。each（function（）{
if（this.tagName =='SELECT'）{
var dropdownList = this;
$ .each（data，function（index，optionData）{
var option = new Option（optionData.Text，
optionData.Value）;
if（$ .browser.msie）{
dropdownList.add（option）;
}
else {
dropdownList.add（option ，null）;
}
if（$（this）.children（）。size（）< 2）{
$（this）.hide b $ b}
else {
$（this）.show（）;
}
}）;
}
}）;
}
我现在遇到的问题是我需要隐藏不下载的下拉列表包含任何选项或仅包含一个选项。应该在对服务进行呼叫时以及页面发送到客户端时（POSTBACK）进行检查。
我需要的是： p>
- 4下拉菜单
- 首次输入页面时，只有第一个下拉菜单可见。
- 当从dropdown1中选择一个选项时，下拉列表2将被填充，所以
- 如果只有1个选项，那么下拉列表应该被隐藏
- 如果所有4个下拉列表都已设置，最终用户更改dropdown1，则dropdown2应该被重新加载，其余的将被隐藏
- 如果用户选择了某些下拉列表1，2和3），并点击提交，页面不被服务器端接受（无效），下拉列表应该完全按照用户在页面返回用户时点击提交按钮的方式设置。
对此有任何建议？
解决方案
关于这个这里（减去隐藏的部分 - 你似乎已经钉住了） 。
本质上，如果有错误，您将需要使用所选值重建下拉列表。
$（＃ClientId）。change（function（）{
var clientId =;
$（＃ClientId选项：选择）。each（function（）{
clientId + = $（this）[0] .value;
}）;
var url = '<％：Url.Action（ProjectList，Client）％>'+/+ clientId;
$ .getJSON（url，null，function（data）{
var selectedValue ='<％：Model.ProjectId％>';
$（＃ProjectId）。empty（）;
$ .each（data，function（index，optionData）{
if（optionData.OBJID == parseInt（selectedValue））
$（＃ProjectId）。append（< option value ='+ optionData.ObjId +'selected ='true'> + optionData.Name +< / option>）;
else
$（＃ProjectId）。append（< option value ='+ optionData.ObjId +'> + optionData.Name +< / option>）;
}）;
}）;
}）。
I am working with cascading dropdowns in MVC. It appears that I will not be able to easily create dropdowns on demand, instead I will have to add the dropdowns before sending it to the client.
This is how I am doing it right now:
In the aspx page
<%: Html.DropDownListFor(model => model.ModelViewAd.Category1, Model.ModelViewAd.Category1List, "-- Välj kategori --")%>
<%: Html.DropDownListFor(model => model.ModelViewAd.Category2, Model.ModelViewAd.Category2List, "-- Välj kategori --")%>
<%: Html.DropDownListFor(model => model.ModelViewAd.Category3, Model.ModelViewAd.Category3List, "-- Välj kategori --")%>
<%: Html.DropDownListFor(model => model.ModelViewAd.Category4, Model.ModelViewAd.Category4List, "-- Välj kategori --")%>
This is rendered like this :
<select id="ModelViewAd_Category1" name="ModelViewAd.Category1">
<option value="">-- Välj kategori --</option>
<option value="10">Fordon</option>
<option value="15">För hemmet</option>
<option value="17">Bostad</option>
</select>
<select id="ModelViewAd_Category2" name="ModelViewAd.Category2">
<option value="">-- Välj kategori --</option>
</select>
<select id="ModelViewAd_Category3" name="ModelViewAd.Category3">
<option value="">-- Välj kategori --</option>
</select>
<select id="ModelViewAd_Category4" name="ModelViewAd.Category4">
<option value="">-- Välj kategori --</option>
</select>
This is what the script on the page looks like:
<script type="text/javascript">
$(function () {
$("select#ModelViewAd_Category1").change(function () {
var id = $(this).val();
var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
$.getJSON(urlAction, { id: id }, function (data) {
$("#ModelViewAd_Category2").addItems(data.d);
});
});
$("select#ModelViewAd_Category2").change(function () {
var id = $(this).val();
var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
$.getJSON(urlAction, { id: id }, function (data) {
$("#ModelViewAd_Category3").addItems(data.d);
});
});
$("select#ModelViewAd_Category3").change(function () {
var id = $(this).val();
var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
$.getJSON(urlAction, { id: id }, function (data) {
$("#ModelViewAd_Category4").addItems(data.d);
});
});
});
</script>
And then I have an included file that contains this:
$.fn.clearSelect = function () {
return this.each(function () {
if (this.tagName == 'SELECT')
this.options.length = 0;
});
}
$.fn.addItems = function (data) {
return this.clearSelect().each(function () {
if (this.tagName == 'SELECT') {
var dropdownList = this;
$.each(data, function (index, optionData) {
var option = new Option(optionData.Text,
optionData.Value);
if ($.browser.msie) {
dropdownList.add(option);
}
else {
dropdownList.add(option, null);
}
if ($(this).children().size() < 2) {
$(this).hide();
}
else {
$(this).show();
}
});
}
});
}
The problem I now have is that I need to hide the dropdowns that do not contain any options or only contain one option. This should be checked when doing a call to the service as well as when the page is sent to the client ("POSTBACK").
What I need is :
- 4 Dropdowns
- Only the first dropdown is visible when first entering the page.
- When selecting an option from dropdown1 the dropdown2 will be populated and so on
- If there is only 1 option then the dropdown should be hidden
- If all 4 dropdowns are set and the end-user changes dropdown1, then dropdown2 should be reloaded and the rest be hidden
- If the user has selected some of the dropdowns (say 1, 2 and 3) and hit submit and the page is not accepted on the server side (not valid) the dropdowns should be set exactly as when the user clicked the submit button when the page returns to the user.
Any suggestions on this?
解决方案
I wrote a blog post about this here (minus the hiding part - which you seem to have nailed down). Essentially, you will need to rebuild the dropdown with the selected values if there is an error.
$("#ClientId").change(function () {
var clientId = "";
$("#ClientId option:selected").each(function () {
clientId += $(this)[0].value;
});
var url = '<%:Url.Action("ProjectList", "Client") %>' + "/" + clientId;
$.getJSON(url, null, function (data) {
var selectedValue = '<%:Model.ProjectId %>';
$("#ProjectId").empty();
$.each(data, function (index, optionData) {
if (optionData.OBJID == parseInt(selectedValue))
$("#ProjectId").append("<option value='" + optionData.ObjId+ "' selected='true'>" + optionData.Name + "</option>");
else
$("#ProjectId").append("<option value='" + optionData.ObjId + "'>" + optionData.Name + "</option>");
});
});
}).change();
这篇关于级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
