Carscading dropdowns
- by SnowJim
Hi!
I am working with carscading dropdowns in MVC. It apears that I will not be able to easaly create dropdowns on demand, instead I will have to add the dropdowns before sending it to the client.
This is how are 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 how 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 a 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 do only contains 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 a 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 is set and the end-user change dropdown 1, then dropdown2 should be reloaded and the rest be hidden
If the user have 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 exacly as when the user cliked the submit button when the page returns to the user.
Any suggestions on this?
