CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc
Izzy
Izzy

Reputation: 6876

Hide and show divs according to dropdown selected

I have a dropdown list containing 7 options. Each option a user selects they have to fill out a description in a text area right below it. What I'm trying to achieve is when an option is selected show the appropriate div and hide the others. This is what I've got so far

$(document).ready(function () {
        $("#define-labelling").hide();
        ... hide the remaining divs here 

$("#ProjectStatus").change(function () {
            var selectedValue = "";
            $("#ProjectStatus option:selected").each(function () {
                selectedValue += $(this).val();
                if (selectedValue === "Define (Labelling)") {
                    $("#define-labelling").fadeIn("slow");
                }
               ... More if statements here for the other divs 
            });
        });
    });
});

My questions is, is there a cleaner way to go about this? Because currently I have multiple if statements and hiding and show the appropriate divs is getting a little ugly.

Update following @Mairaj answer

function showDiv() {
   var divID = $("#ProjectStatus option:selected").attr("data-div");
   alert(divID); //this comes as undefined 
   $("#" + divID).show();
   $("#" + divID).siblings().hide();
}

I've added two divs as:

<div class="form-group" id="Define (Labelling)" style="display: none;">
@Html.LabelFor(model => Model.LabellingInfo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.TextAreaFor(model => Model.LabellingInfo, htmlAttributes: new { @class = "form-control description" })
</div>
</div>
<div class="form-group" id="Analysis (Root Cause)" style="display:none;">
@Html.LabelFor(model => Model.RootCauseInfo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.TextAreaFor(model => Model.RootCauseInfo, htmlAttributes: new { @class = "form-control description" })
</div>

Upvotes: 2

Views: 2899

Answers (4)

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

You can add a custom attribute(data-div) to each option of dropdown which will be ID of div which will be shown.

<div id="divMain" >
    <div id="Div1">Div1</div>
    <div id="Div2" style="display:none">Div2</div>
    <div  id="Div3" style="display:none">Div3</div>
</div>


<select id="ddlOption" onchange="showdiv()">
    <option value="Div1" data-div="Div1">Div1</option>
    <option value="Div2" data-div="Div2">Div2</option>
</select>

Here is jquery code which will show hide div according to the selected option

function showdiv()
{
   var divID = $("#ddlOption option:selected").attr("data-div");
   divID = divID.replace(" ","");
   $("div[id$='" + divID+"']").show();
   $("div[id$='" + divID + "']").siblings().hide();
}

Upvotes: 2

Mickey Patel
Mickey Patel

Reputation: 501

Do like this.

Give a class name to all your input field(all name should be same) and the id should be same with select option value. Then onchange of select call a function. There easyly you can get value of selected option. first hide all input box based on class name then through this value show the respected div. 

Ex:
<select id="somename" onchange="callMe(this.value)">
<option value="one">First</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

<textarea id="one" class="abc"> </textarea>
<textarea id="two" class="abc"></textarea>
....
<script>
function callMe(val){
   $('.abc').hide();
   $('#'+val).show();
}
</script>

Upvotes: 0

gdreamlend
gdreamlend

Reputation: 106

you can you addClass,removeClassand containsto help you cleaner your code like this.(I just use ul li as an example).

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
 </script>
<style type="text/css">
  .none{display: none;}
</style>
</head>
<body>
<span>
    <input  name="color">
    <ul>
        <li value="green" >Green</li>
        <li value="blue" >Blue</li>
        <li value="red" >Red</li>
    </ul>
</span>
<script type="text/javascript">
    $("input").attr("value","Red");
    $("input").change(function(event) {
        $("li").addClass("none");
        $("ul li:contains('"+$("input").val()+"')").removeClass("none");//if the inpute's value changed then the li will added a class attribute corresponding
    });
</script>
</body>
</html>

Upvotes: 0

Rica
Rica

Reputation: 88

In my case I have done it this way where if "other" with Id "5" from dropdown is selected then display a textbox.Check if it might be of any help

Script:

<script type="text/javascript">
  function toggleHidden() { 
    if ($('#SelectedCategoryId').val() === '5') {
      $('#other').show(1000);
    }
    else {
      $('#other').hide(1000);
  }    
  $(document).ready(function () {
    toggleHidden(); 
  });
</script>

View:

@Html.LabelFor(m => m.Category, "Department :", new { style = "display:inline;" })
@Html.DropDownListFor(m => m.SelectedCategoryId, new SelectList(Model.Category, "Value", "Text"), "SelectCategory", new { id = "SelectedCategoryId", @onchange = "toggleHidden()" })
@Html.TextBoxFor(m => m.Other, new { id = "other", @class = "other" ,style = "display: none;" })

Upvotes: 0

Related Questions