基于dropdown -js显示/隐藏部分 [英] Show/hide section based on dropdown -js
本文介绍了基于dropdown -js显示/隐藏部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面你会在codepen上看到我的代码： http://codepen.io/Nestalna/details/ qpjsy
Javascript：
function show（aval ）{
if（aval ==1）{
optionyes.style.visibility ='visible';
optionyes.style.display ='block';
Form.fileURL.focus（）;
}
if（aval ==0）{
optionyes.style.visibility ='hidden';
optionyes.style.display ='none';
$ / code $ / pre
$ b HTML：
< div class =row>
< label id =titlefor =degree>您对哪个学位感兴趣？ < / label>< br />
< option selected =selectedvalue =请选择一个>请选择一个< / option>
< option value =0>并发注册< / option>
< option value =1> 2015应用生物伦理夏季研究< / option>
< option value =2>非学位（9小时或以下）< / option>
< / select>
< / div>
< div id =optionyesstyle =visibility：hidden>您已选择< strong>红色选项< / strong>所以我在这里< / div>
解决方案如果您选择'2'在所有。你只想显示它，如果aval == 1的权利？所以改变 if（aval ==0）{ to else {
函数show（aval）{
if（aval ==1）{// 1然后显示
optionyes.style。能见度=可见;
optionyes.style.display ='block';
Form.fileURL.focus（）;
}
else {//对于其他所有内容隐藏它
optionyes.style.visibility ='hidden';
optionyes.style.display ='none';
}
}
http://codepen.io/anon/pen/ywcqf
Hi all I got my code all nice and pretty but the problem is that it is a bit buggy. When you select the field that actually un-hides a section and then another one that hides it- the "hidden" section is still there for some time!
Below you will see my code on codepen:http://codepen.io/Nestalna/details/qpjsy
Javascript:
function show(aval) {
if (aval == "1") {
optionyes.style.visibility='visible';
optionyes.style.display='block';
Form.fileURL.focus();
}
if (aval == "0") {
optionyes.style.visibility='hidden';
optionyes.style.display='none';
}
}
HTML:
<div class="row">
<label id="title" for="degree">Which degree are you interested in? </label><br />
<select id="degree" name="degree" onchange="java_script_:show(this.options[this.selectedIndex].value)" >
<option selected="selected" value="Please select one"> Please select one </option>
<option value="0" > Concurrent Enrolment </option>
<option value="1" > 2015 Applied Bioethics Summer Study </option>
<option value="2"> Non Degree (9 hours or less) </option>
</select>
</div>
<div id="optionyes" style="visibility:hidden" >You have selected <strong>red option</strong> so i am here </div>
解决方案 If you select '2' it doesn't hide at all. You only want to show it if aval==1 right? So change if (aval == "0") { to else {
function show(aval) {
if (aval == "1") {//if 1 then show it
optionyes.style.visibility='visible';
optionyes.style.display='block';
Form.fileURL.focus();
}
else {//for everything else hide it
optionyes.style.visibility='hidden';
optionyes.style.display='none';
}
}
http://codepen.io/anon/pen/ywcqf
这篇关于基于dropdown -js显示/隐藏部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
