Hide and show divs according to dropdown selected

2
votes

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>

4
jqueryhtmlasp.net-mvc
perhaps you can add a class none and .none{display: none;} ,if change happens then $(#ProjectStatus).addClass('none') and $("#define-labelling")..removeClass('none') - gdreamlend
@gdreamlend Can you elaborate please? - Izzy
What you are showing in your select option, are they fixed. - Mickey Patel
@MickeyPatel The values from being populated from a database and they won't change - Izzy

4 Answers

2
votes

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();
}
0
votes

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;" })
0
votes

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>
0
votes

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>