Question

使用jquery，我如何判断选择了哪个选项，并“显示”一个相应的隐藏div？

<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>

<label for="name">Name</label>
<input id="name" type="text" />

<button id="search">search</button>

<div id="results-A"> lorem ipsum </div>
<div id="results-B"> lorem ipsum </div>
<div id="results-C"> lorem ipsum </div>

$(document).ready(function(){
$("#results-A").hide();
$("#results-B").hide();
$("#results-C").hide(); 

$("#search").bind("click", function() {

});   

});

Answer 1

如果你遵循这个惯例：

<div id="results-1"> lorem ipsum </div>
<div id="results-2"> lorem ipsum </div>
<div id="results-3"> lorem ipsum </div>

然后：

$("#mySelect").change(function() {

    //optionally, if you want previously selected ones to be hidden
    $("[id^=results-]").hide();

    $("#results-" + $(this).val()).show();
}).change(); // trigger it the first time around, to reveal the 'default'

演示：http://jsfiddle.net/9aqTB/

Answer 2

首先，让我们将结果元素包装起来，以便它们易于访问。

<div id="results">
  <div id="results-A"> lorem ipsum </div>
  <div id="results-B"> lorem ipsum </div>
  <div id="results-C"> lorem ipsum </div>
</div>

然后，您可以使用下拉列表的值来选择具有该索引的结果div。索引从0开始，所以我添加了-1以正确匹配。

$("#search").click(function() {
    var value = parseInt($("#mySelect").val()) -1;
    $("#results").children().hide().eq(value).show();
});

这是一个演示http://jsfiddle.net/ShLRh/

Answer 3

抱歉，但我觉得我的编码有点乱，但我觉得它基本上是你想要的。

<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        hideAllResults();

        // on change show them
        $("#mySelect").change(function(){
            hideAllResults();
            $("#"+($(this).val())).show();
        });

    });
    function hideAllResults(){
        //hide all result div first
        $("#resultDiv div").each(function(){
            $(this).hide();
        });
    }
</script>
</head>
<select id="mySelect">
    <option value="results-A">First</option>
    <option value="results-B">Second</option>
    <option value="results-C">Third</option>
</select>

<label for="name">Name</label>
<input id="name" type="text" />

<button id="search">search</button>

<div id="resultDiv">
    <div id="results-A" class="result"> lorem ipsum A</div>
    <div id="results-B" class="result"> lorem ipsum B</div>
    <div id="results-C" class="result"> lorem ipsum C</div>
</div>
</html>

Answer 4

如果您正在使用jQuery 1.4.2，那么这将根据所选的第n个选项显示第n个div：

$("#search").click(function() {
    $('div').hide().eq($(':selected').index()).show();
});

http://jsfiddle.net/e9Dc5/

使用jquery选择所选选项以显示特定结果

4 个答案: