根据选择的下拉菜单隐藏和显示 div答案

【问题标题】：Hide and show divs according to dropdown selected根据选择的下拉菜单隐藏和显示 div
【发布时间】：2016-06-01 09:26:25
【问题描述】：

我有一个包含 7 个选项的下拉列表。用户选择的每个选项都必须在其正下方的文本区域中填写描述。我正在尝试实现的是选择一个选项，显示适当的div并隐藏其他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：

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

【问题讨论】：

也许你可以添加一个类 none 和 .none{display: none;} ，如果发生变化然后 $(#ProjectStatus).addClass('none') 和 $("#define-labelling")..removeClass('none')
@gdreamlend 你能详细说明一下吗？
您在选择选项中显示的内容是否已修复。
@MickeyPatel 从数据库中填充的值，它们不会改变

标签： jquery html asp.net-mvc

【解决方案1】：

您可以为dropdown 的每个option 添加自定义属性（data-div），这将是ID 的div 将显示。

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

【讨论】：

感谢您的回答，我该如何选择data-div？因为我的<select> 中的值是从数据库中填充的
所以你可以让divId和options的值一样，根据option的值显示div。
我刚刚尝试了您的建议，我收到以下错误：Error: Syntax error, unrecognized expression: #[object Object]
我已经为我的所有 div 提供了与选项值匹配的 id，并像 @Html.DropDownListFor(model => model.ProjectStatus, Model.ProjectStatusesDdl, "Please Select Your Project Status", htmlAttributes: new { @class = "projectddl", @onchange = "showDiv()" }) 一样调用了 showDiv() 函数
不，您从data-div 获得了 div id，但它不存在所以将 $("#ProjectStatus option:selected").attr("data-div"); 从 $("#ProjectStatus option:selected").val() 更改为；

【解决方案2】：

在我的情况下，我已经这样做了，如果从下拉列表中选择 ID 为“5”的“其他”，则显示一个文本框。检查它是否有任何帮助

脚本：

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

【讨论】：

【解决方案3】：

你可以addClass,removeClass和contains来帮助你清理你的代码。（我只是以ul li为例）。

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

【讨论】：

【解决方案4】：

这样做。

为所有输入字段指定一个类名（所有名称应相同），id 应与选择选项值相同。然后 onchange 的 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>

【讨论】：