Menu
I am struggling to get dropdown list onchange event in jquery. When selecting Date from dropdownlist, other textbox should be invisible and date textbox shoud be visible. And when selecting Status, other textboxes should be invisible and status of dropdownlist should be visible. It happens nothing. Please look at my code what i am doing wrong. Your help means alot.
_Layout.cshtml
<head>
<script type="text/javascript">
$(function () {
$('#categorie').on('change', function () {
if ($(this).val() == "Date") {
$('#keyword').hide(); //invisible
$('#txtcalendar').show();
} else if ($(this).val() == "Status"){
$('#keyword').hide(); //invisible
$('#txtcalendar ').hide();
$('#tmstatus ').show();
}
.
.
.
});
});
</script>
</head>
Index.cshtml
@Html.DropDownList("categorie", new SelectList(new[]
{
"All", "Id", "Status",
"Vendor", "Date"
}) as SelectList)
<p> Keyword: @Html.TextBox("keyword") <input id="Submit" type="submit" value="Search" /> </p>
<p>Calendar @Html.TextBox("txtcalendar", new {}, new { @class = "myclass", style = "display:none;" })</p>
@Html.DropDownList("tmstatus", new SelectList(new[]
{
"Success", "Pending", "Error",
}) as SelectList)
854
asked Dec 31 '25 20:12
In your application, Go to app_start\BundleConfig.cs and in RegisterBundles method check that bundling for Jquery has been registered or not. It should have added bundle for jquery as mentioned below :
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
If it is not there in RegisterBundles method then add it. And go to below steps :
Go to your _Layout.cshtml page
Add @Scripts.Render("~/bundles/jquery") before end of the head tag. In my sample application it looks like as mentioned below:
Cut your javascript code of dropdownlist change from _Layout.cshtml
Paste it in index.cshtml at the end.
My Index.cshtml page looks like this :
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index Page</h2>
@Html.DropDownList("categorie", new SelectList(new[]
{
"All", "Id", "Status",
"Vendor", "Date"
}) as SelectList)
<p> Keyword: @Html.TextBox("keyword") <input id="Submit" type="submit" value="Search" /> </p>
<p>Calendar @Html.TextBox("txtcalendar", new { }, new { @class = "myclass", style = "display:none;" })</p>
@Html.DropDownList("tmstatus", new SelectList(new[]
{
"Success", "Pending", "Error",
}) as SelectList)
<script type="text/javascript">
$(function () {
$('#categorie').on('change', function () {
if ($(this).val() == "Date") {
$('#tmstatus ').show();
$('#keyword').hide(); //invisible
$('#txtcalendar').show();
} else if ($(this).val() == "Status") {
$('#keyword').hide(); //invisible
$('#txtcalendar ').hide();
$('#tmstatus ').show();
}
});
});
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
