根据select标签下的选择选项隐藏和显示div

时间:2015-06-02 04:44:45

标签: javascript html css

我的代码似乎不起作用。 所以我有一个像这样的div:

WeihongLoudeMacBook-Air:~ jeremy$ rvm use ruby --install --default

Using /Users/jeremy/.rvm/gems/ruby-2.2.1

Warning! Executable 'ruby' missing, something went wrong with this ruby installation!

Warning! Executable 'gem' missing, something went wrong with this ruby installation!

Warning! Executable 'irb' missing, something went wrong with this ruby installation!

然后这个:

<div class="abc">
<form>
**some input tags**

这是我的js代码:

<select>
<option value="" onclick="myfx1()">yes</option>
<option value="" onclick="myfx2()">no</option></select>

***************及以下是选择否时必须出现的div ******************* ***

<script type="text/javascript">
function myfx1(){
    document.getElementById("hid").style.visibility="hidden";
}
function myfx2(){
    document.getElementById("hid").style.visibility="visible";
}
</script>

然后以一个按钮结束:

<div id="hid">
<select>
**some options**
</select>
<font>
**some text**
</font>
**some more textarea and input tags**
</div>
**end of the div**

3 个答案:

答案 0 :(得分:2)

<select onchange='myfx1(this.value)'>
<option value="1" >yes</option>
<option value="0" >no</option></select>


<script type="text/javascript">
function myfx1(value){
    if(value==1) {
    document.getElementById("hid").style.visibility="hidden";
}else {
document.getElementById("hid").style.visibility="visible";
}
}</script>

答案 1 :(得分:2)

HTML

<select name='options' id="select">
  <option value='yes'>Yes</option>
  <option value='no'>No</option>
</select>  

 <div id="hid">
   Test
</div>

JS

var elem = document.getElementById("hid");
document.getElementById('select').addEventListener('change', function(){
  if(this.value == 'yes'){
   elem.style.visibility="visible";
 }else{
  elem.style.visibility="hidden";
 }
})

答案 2 :(得分:1)

$("#YourSelectBoxID").change(function(){
   if($(this).val() == "YourDesiredConditionForCheckWhichValueIsSelected") {
      $(".abc").hide();
   } else {
      $(".abc").show();
   }
});