我有一个表单,我想根据下拉列表的选定值更改它的内容。以下所有内容都将用于PHP文件中。
看起来像这样:
<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>
建议的解决方案如下
您可以使用slideUp()和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>
我的问题如何添加幻灯片/缩小脚本以及是否有其他方法可以解决此问题?
谢谢!
答案 0 :(得分:2)
我的问题是如何添加 幻灯片/向下脚本和是否有任何 处理这个的其他方法?
如果您制定约会<option/>
的值与您要显示的div的ID相同,那么您可以将更改事件更改为如下所示:
$("#selectMenu").bind("change", function() {
$(".hide").slideUp().filter("#" + $(this).val()).slideDown();
});
jsfiddle上的示例。