根据选定的下拉列表隐藏和显示div

Question

我有一个包含7个选项的下拉列表。用户选择的每个选项都必须在其正下方的文本区域中填写描述。我试图实现的是，当一个选项被选中时，显示适当的div并隐藏其他的。这就是我到目前为止所得到的

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

我的问题是，有没有一种更干净的方法来解决这个问题呢？因为目前我有多个if语句，并且隐藏和显示适当的div变得有点丑陋。

更新以下@Mairaj答案

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

我添加了两个div 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>

​

Answer 1

您可以向dropdown的每个option添加一个自定义属性(data-div)，该属性将是div的ID，如图所示。

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

下面是jquery代码，它将根据选择的option显示隐藏div

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

Answer 2

在我的例子中，我是这样做的，如果从下拉列表中选择了Id为"5“的"other”，则显示一个textbox.Check，如果它可能有任何帮助的话

脚本：

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

查看：

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

Answer 3

像这样做。

为所有输入字段指定一个类名(所有名称都应该是相同的)，id应该与选择选项值相同。然后，在更改select时调用一个函数。在那里你可以很容易地得到所选选项的值。首先隐藏所有基于类名的输入框，然后通过这个值显示受尊重的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>