1

使用 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() {

});   

});
4

4 回答 4

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/

于 2010-08-27T00:33:49.530 回答
0

抱歉，但我认为我对您的编码有点混乱，但我认为它基本上可以满足您的需求。

<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>
于 2010-08-27T01:08:12.557 回答
0

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

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

http://jsfiddle.net/e9Dc5/

于 2010-08-27T01:28:43.840 回答
0

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

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

于 2010-08-27T00:40:45.557 回答