I have the following in the page aspx
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Text="[ == Please Select == ]" Value="" />
<asp:ListItem Text="TOYOTA" Value="TOYOTA" />
<asp:ListItem Text="MERCEDES-BENZ" Value="MERCEDES-BENZ" />
<asp:ListItem Text="BMW" Value="BMW" />
<asp:ListItem Text="HONDA" Value="HONDA" />
<asp:ListItem Text="FORD" Value="FORD" />
</asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server">
<asp:ListItem Text="[ == Please Select == ]" Value="" />
<asp:ListItem Text="Available" Value="Available" />
<asp:ListItem Text="Not available" Value="Not available" />
</asp:DropDownList>
I would like to remove certain values from the DropDownList ddl2 cloned if certain conditions are true.
E.g
if(ddl1.value=="HONDA"){
// remove Available value from the DropDownList ddl2 cloned
}
Output
//DROP DOWN LIST CLONED FROM DDL2
<asp:DropDownList ID="ddl2_x" runat="server">
<asp:ListItem Text="[ == Please Select == ]" Value="" />
<asp:ListItem Text="Not available" Value="Not available" />
</asp:DropDownList>
How can I do this using jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnClone]").bind("click", function () {
var index = $("#container select").length + 1;
//Clone the DropDownList
var ddl2 = $("select[id$=ddl2]").clone();
ddl2.attr("id", "ddl2_" + index);
ddl2.attr("name", "ddl2_" + index);
var selectedValue2 = $("select[id$=ddl2] option:selected").val();
ddl2.find("option[value = '" + selectedValue2 + "']").attr("selected", "selected");
//Append to the DIV.
$("#container").append(ddl2);
$("#container").append("<br /><br />");
return false;
});
});
</script>
<div id="container">
<asp:Button ID="btnClone" Text="Clone" runat="server" />
</div>