I have 10 Dropdowns in a sharepoint list. When the user Clicks on Add New Item in Newform.aspx Currently it will show only First Dropdown i.e (Drop1) With Empty Value. When the user Selects any Value From the Dropdown then Second Dropdown i.e (Drop2) with Empty value is shown. Like this Drop3.. Drop4.. Drop 5 ... Drop 10.
My Target is :
How can we hide the Dropdown in a Un Even manner. For Ex If the User Selects Drop 4 as empty It should Empty and hide Drop 5, Drop 6 Drop 7... Drop10. It should not Empty Drop 1 .. Drop 3
Any help on this please.
My Code is as Follows:
$(document).ready(function(){
CheckDropdown("DropDown 1","DropDown 2");
CheckDropdown("DropDown 2","DropDown 3");
CheckDropdown("DropDown 3","DropDown 4");
CheckDropdown("DropDown 4","DropDown 5");
CheckDropdown("DropDown 5","DropDown 6");
CheckDropdown("DropDown 6","DropDown 7");
CheckDropdown("DropDown 7","DropDown 8");
CheckDropdown("DropDown 8","DropDown 9");
CheckDropdown("DropDown 9","DropDown 10");
CheckDropdown("DropDown 10","DropDown 11");
CheckDropdown("DropDown 11","DropDown 12");
CheckDropdown("DropDown 12","DropDown 13");
CheckDropdown("DropDown 13","DropDown 14");
CheckDropdown("DropDown 14","DropDown 15");
});
function CheckDropdown(Drop_Column,Hide_Column)
{
if ($("select[title='"+Drop_Column+"']option:selected").text() == "")
{
HideColumn(Hide_Column,"True");
}
else
{
HideColumn(Hide_Column,"False");
}
var DropDownColum=$("select[title='"+Drop_Column+"']");
DropDownColum.change(function() {
var value = $(this).val();// Value of selected option
var Text = $(this).val();// Text of selected option
// alert('Value: '+value);
// alert('Text:' +Text);
if (Text == "")
{
HideColumn(Hide_Column,"True");
$("select[title='"+Hide_Column+"']").find('option:eq(0)').prop('selected', true);
}
else
{
HideColumn(Hide_Column,"False");
}
});
}
function HideColumn(Column,IsHide)
{
if(IsHide=="True")
{
$('nobr:contains("'+Column+'")').closest('tr').hide();
}
else
{
$('nobr:contains("'+Column+'")').closest('tr').show();
}
}
</script>