使用jquery選擇選定的選項來顯示特定的結果

使用jquery，我該如何判斷選擇了哪個選項，並「顯示」一個對應的隱藏div？使用jquery選擇選定的選項來顯示特定的結果

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

}); 

});

來源

2010-08-27 roxstyle

如果按照這個約定：

<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-27 00:33:49 karim79

首先，讓我們來包裹效果的元素，使他們容易訪問。

<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-27 00:40:45 Marko

你會繼續顯示出越來越div與此。你不應該隱藏當前顯示的div嗎？ – 2010-08-27 00:42:54

你是對的，我在特定節目發生之前在所有元素上添加了一個hide（） – Marko 2010-08-27 00:44:41

抱歉，但我想我已經用你的編碼有點亂，但我認爲它基本上是你想要的。

<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-27 01:08:12 melaos

您的hideAllResults函數實際上可以用$（「＃resultDiv div」）。hide（）代替。 hide（）與一組元素一起工作，而不僅僅是一個..所以不需要迭代它們。 – Marko 2010-08-27 01:46:12

大聲笑。哦，你是對的我的壞。我最近開發了一個.each快樂代碼。 – melaos 2010-08-27 05:42:33

，如果你使用jQuery 1.4.2，那麼這將根據第n]選項中的第n個DIV被選中：

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

http://jsfiddle.net/e9Dc5/

來源

2010-08-27 01:28:43

使用jquery選擇選定的選項來顯示特定的結果

回答

相關問題