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：

<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

您可以向data-div option的{{1}}个dropdown添加自定义属性（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>。

div

以下是jquery代码，根据所选的option

显示隐藏

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

https://www.paypal.com/cgi-bin/webscr

Answer 2

就我而言，我已经这样做了，如果＆＃34;其他＆＃34;与Id＆＃34; 5＆＃34;从下拉列表中选择然后显示一个文本框。检查它是否有任何帮助

脚本：

<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选项值相同。然后onchange选择调用一个函数。您可以轻松获得所选选项的价值。首先根据类名隐藏所有输入框，然后通过此值显示受尊重的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>

Answer 4

你可以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>

根据所选的下拉菜单隐藏和显示div

4 个答案: