CODEWITHSUNDEEP
javascripthtmlcss
ranel
ranel

Reputation: 129

Making a div hidden and visible according to the chosen option under select tag

My code don't seem to work. So i have a div like this:

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

then this:

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

And this is my js code:

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

***************and below is the div that has to appear when no is selected**********************

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

then it ends with a button:

<input type="button" style="float:right" value="Go">
</div></form>

Upvotes: 2

Views: 715

Answers (3)

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

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";
 }
})

Upvotes: 2

Qaisar Satti
Qaisar Satti

Reputation: 2762

<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>

Upvotes: 2

danish farhaj
danish farhaj

Reputation: 1354

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

Upvotes: 1

Related Questions