MVC dropdown index change - asp.net-mvc

Question

I got a requirement can any one please suggest me ideas if possible with sample
I have a dropdown and beneath i have couple of checkboxes...
For each dropdown item user can select checkboxes.., if user change index of dropdown previous dropdown index and checkbox should maintain in session and new index item can select boxes....
All together we need to post to server...
for eg; dropdown list contains apple,samsung,motorola,htc
checkboxes contain 3G,LTE,Speed,Bandwdth..
once apple is selected he selected values 3g and LTE. and again user selected samsung in dropdown and he selected check boxes speed and lTE.
While posting to server i need to send both list like
apple 3G
apple LTE
Samsung Speed
Samsung LTE
Could any one please suggest some ideas and example

Answer 1

Rather than using Dropdown List you can use div with labels and checkboxes and use jQuery to post data.
You can use jQuery plugin in your case. Here is a good example http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

Answer 2

I am sure there will be many other way to do this, and i think this will help you.
In aspx page:
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Value="-1">Select a Device</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Samsung</asp:ListItem>
<asp:ListItem>Nokia</asp:ListItem>
<asp:ListItem>HTC</asp:ListItem>
</asp:DropDownList>
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>3G</asp:ListItem>
<asp:ListItem>LTE</asp:ListItem>
<asp:ListItem>Speed</asp:ListItem>
<asp:ListItem>Bandwidth</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:Button ID="ButtonSubmit" runat="server" OnClick="ButtonSubmit_Click" Text="Submit" />
<asp:Button ID="ButtonSave" runat="server" OnClick="ButtonSave_Click" Text="Save Data" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Clear First ListBox" />
<br />
<br />
<asp:ListBox ID="ListBox1" runat="server" Height="88px" SelectionMode="Multiple" Width="208px"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server" Height="88px" SelectionMode="Multiple" Width="208px"></asp:ListBox>
</div>
</form>
and in code behind file paste this,
protected void Page_Load(object sender, EventArgs e)
{
}
public void LoadDataToListBox(string list1)
{
ListBox1.Items.Add(list1);
}
protected void ButtonSave_Click(object sender, EventArgs e)
{
if (ListBox1.Items.Count != 0)
{
for (int i = 0; i < ListBox1.Items.Count; i++)
{
ListBox2.Items.Add(ListBox1.Items[i]);
}
}
}
protected void ButtonSubmit_Click(object sender, EventArgs e)
{
if(DropDownList1.SelectedValue!="-1")
{
string item1 = "You'r device is " + DropDownList1.SelectedValue;
LoadDataToListBox(item1);
}
foreach (ListItem li in CheckBoxList1.Items)
{
if(li.Selected)
{
LoadDataToListBox("You Choose " + li.Text);
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
ListBox1.Items.Clear();
}