使用jQuery效果來改變div的內容？

我有一個表單，我想根據下拉列表中選定的值來更改它的內容。以下所有內容將用於PHP文件。使用jQuery效果來改變div的內容？

它看起來像這樣：

<style type="text/css"> 
.hide { 
display:none; 
} 

<select> 
<option value="" >Please select product below</option> 
<option value="pro1">Product 1</option> 
<option value="pro2">Product 2</option> 
</select> 

<div id="pro1" class="hide" >Product 1</div> 
<div id="pro2" class="hide" >Product 2</div>

的建議解決方案如下

您可以使用效果基本show（）和了slideDown內置效果。

或jQuery的任何其他內置效果。 http://api.jquery.com/category/effects/

$(document).ready(function() {  
     $("#selectMenu").bind("change", function() { 
     if ($(this).val() == "pro1") { 
      $("#pro1").slideDown(); 
      $("#pro2").slideUp(); 
     } 
     else if($(this).val() =="pro2") { 
      $("#pro2").slideDown(); 
      $("#pro1").slideUp(); 
     } 
    }); 
});

HTML

<select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select>

我的問題是我如何可以添加效果基本show /下腳本，有沒有其他的方式來處理呢？

謝謝！

來源

2011-03-08 EnexoOnoma

您是否訪問過此頁面？ http://jqueryui.com/demos/effect/這個解釋一切你需要的效果...以及這個頁面http://jqueryui.com/docs/Effects/Methods – Val 2011-03-08 11:21:25

如何使用一個簡單的JavaScript就像這個例子？ – EnexoOnoma 2011-03-08 11:34:58

我的問題是我怎麼可以添加效果基本show /下腳本，並沒有任何其他方式來處理呢？在
$("#selectMenu").bind("change", function() { 
    $(".hide").slideUp().filter("#" + $(this).val()).slideDown(); 
}); 
例子：

如果你做一個約定，你<option/>值是一樣的，你要顯示的div的ID，那麼你可以改變你的改變事件，看起來像這樣jsfiddle。

來源

2011-03-08 12:42:29

使用jQuery效果來改變div的內容？

回答

相關問題