Javascript 级联下拉列表
我正在使用MVC中的级联下拉列表。看起来我无法根据需要轻松创建下拉列表，相反，我必须在将其发送到客户端之前添加下拉列表 我现在就是这样做的： 在aspx页面中Javascript 级联下拉列表,javascript,jquery,html,asp.net-mvc,drop-down-menu,Javascript,Jquery,Html,Asp.net Mvc,Drop Down Menu,我正在使用MVC中的级联下拉列表。看起来我无法根据需要轻松创建下拉列表，相反，我必须在将其发送到客户端之前添加下拉列表 我现在就是这样做的： 在aspx页面中 <%: Html.DropDownListFor(model => model.ModelViewAd.Category1, Model.ModelViewAd.Category1List, "-- Välj kategori --")%> <%: Html.
<%: 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 --")%>
model.ModelViewAd.Category1，model.ModelViewAd.Category1列表，“--Välj kategori--”%>
model.ModelViewAd.Category2，model.ModelViewAd.Category2List，“--Välj kategori-->”
model.ModelViewAd.Category3，model.ModelViewAd.Category3列表，“--Välj kategori-->”
model.ModelViewAd.Category4，model.ModelViewAd.Category4List，“--Välj kategori-->”
<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>
--V&228；lj kategori--
福特
Fö；罗汉米特
博斯塔德
--V&228；卡泰戈里酒店--
--V&228；卡泰戈里酒店--
--V&228；卡泰戈里酒店--
<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>
$（函数（）{
$（“选择#ModelViewAd_类别1”）。更改（函数（）{
var id=$（this.val（）；
var urlAction=“/AdCategory/GetCategoriesByParent1/”+id；
$.getJSON（urlAction，{id:id}，函数（数据）{
$（“#ModelViewAd_Category2”）。增补项（data.d）；
});
});
$（“选择#ModelViewAd_Category2”）。更改（函数（）{
var id=$（this.val（）；
var urlAction=“/AdCategory/GetCategoriesByParent1/”+id；
$.getJSON（urlAction，{id:id}，函数（数据）{
$（“#ModelViewAd_categoriy3”）。增补项（data.d）；
});
});
$（“选择#ModelViewAd_类别3”）。更改（函数（）{
var id=$（this.val（）；
var urlAction=“/AdCategory/GetCategoriesByParent1/”+id；
$.getJSON（urlAction，{id:id}，函数（数据）{
$（“#ModelViewAd_类别4”）。增补项（数据d）；
});
});
});
$.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();
}
});
}
});
}
$.fn.clearSelect=函数（）{
返回此。每个（函数（）{
如果（this.tagName==“选择”）
this.options.length=0；
});
}
$.fn.addItems=函数（数据）{
返回此.clearSelect（）.each（函数（）{
如果（this.tagName==“选择”）{
var dropdownList=此；
$.each（数据、函数（索引、选项数据）{
var option=新选项（optionData.Text，
optionData.Value）；
如果（$.browser.msie）{
dropdownList.add（可选）；
}
否则{
dropdownList.add（选项，空）；
}
if（$（this.children（）.size（）<2）{
$（this.hide（）；
}
否则{
$（this.show（）；
}
});
}
});
}
- 4下拉列表
- 第一次进入页面时，只有第一个下拉列表可见
- 从下拉列表1中选择选项时，将填充下拉列表2，依此类推
- 如果只有1个选项，则应隐藏下拉列表
- 如果设置了所有4个下拉列表，并且最终用户更改了下拉列表1，则应重新加载下拉列表2，并隐藏其余的下拉列表
- 如果用户选择了一些下拉列表（例如1、2和3）并点击提交，并且该页面在服务器端不被接受（无效），则下拉列表的设置应与用户在页面返回给用户时单击提交按钮的设置完全相同
对此有什么建议吗？使用PartialView还有另一种方法 如果为每个下拉列表创建局部视图，或者如果可以，创建通用视图，则只需在加载时渲染第一个视图 当您更改下拉列表的选择时，您将执行一个ajax回发，它可以执行以下两种操作之一 1） 它检查您是否在下拉列表中有选择项。如果您这样做，\n它将获取数据并执行
返回PartialView（“PVName”，PVModel）这将以完全呈现的html返回部分视图
2） 如果没有选择，则返回空字符串或null
然后，jquery只需用返回的html内容替换div。如果为空，则将dic替换为空，这样可以有效地删除下拉列表
所以你的html可能看起来像这样
<div class="firstdd"><dropdown/></div>
<div class="seconddd"></div>
从ajax调用回调时，您只需$（'.seconddd'）.html（returnedHTML）
我希望这是有意义的，并在某种程度上简化了您的代码。使用PartialView还有另一种方法可以做到这一点
如果为每个下拉列表创建局部视图，或者如果可以，创建通用视图，则只需在加载时渲染第一个视图
当您更改下拉列表的选择时，您将执行一个ajax回发，它可以执行以下两种操作之一
1） 它检查您是否在下拉列表中有选择项。如果您这样做，\n它将获取数据并执行返回PartialView（“PVName”，PVModel）这将以完全呈现的html返回部分视图
2） 如果没有选择，则返回空字符串或null
然后，jquery只需用返回的html内容替换div。如果为空，则将dic替换为空，这样可以有效地删除下拉列表
所以你的html可能看起来像这样
<div class="firstdd"><dropdown/></div>
<div class="seconddd"></div>
从ajax调用回调时，您只需$（'.seconddd'）.html（re
if (hideEmpty == true) {
if ($this.children().size() < 2) {
$this.css("visibility", "hidden");
}
else {
$this.css("visibility", "visible");
}
}
$("#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();