Javascript 如何在select上显示整个div
每当有人从标记中选择某个选项时,我需要一些帮助来显示一个div,其中包含一个表单。我的代码是:Javascript 如何在select上显示整个div,javascript,jquery,html,Javascript,Jquery,Html,每当有人从标记中选择某个选项时,我需要一些帮助来显示一个div,其中包含一个表单。我的代码是: <script type="text/javascript"> $(function() { $('#contactOptionSelect').change(function() { $('.emailForm').hide(); $('#' + $(this)
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
我想在选择电子邮件选项时显示最后一张表单。我有点希望它像这样工作:高标准,我知道,但无论如何,哈哈,提前感谢任何帮助 你在找这样的东西吗 无论何时更改select选项,我们都会隐藏可见的div,并显示具有当前select值作为其id属性的div
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
加上此标记:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>
我不是OP,但你的实现可能有点奇怪。有没有办法一次只强制这些动画中的一个或两个工作?如果您使用键盘在选项之间快速切换,您将看到所有3个动画可能同时处于活动状态,当div中有更多内容时,这可能会导致布局问题。有点吹毛求疵,但苹果网站似乎会中断动画,当你在动画之间切换时,相应的div会立即消失。@MerlynMorgan Graham你可以将slideUp的效果切换为hide,从slideDown到show,可以删除任何并行动画。现在使用jQuery/jQuery UI这样的库,动画本身非常容易完成。高光泽的外观和感觉将是难以相处的一部分,但仍然不同,不像一个苹果克隆。他们雇佣了很多设计师: