Cascading dropdowns
- by SnowJim
Hi!
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?
