发表新帖
发表新帖

Want to show/hide div based on dropdown box selection

后端 未结
关注
7 2138
感情败类
感情败类 2020-12-08 01:10

I want to have jQuery show div id=\'business\' only if \'business use\' is selected in the dropdown box.

This is my code:
相关标签:
7条回答
  • 一个人的身影
    2020-12-08 01:21

    The core problem is the js errors:

    $('#purpose').on('change', function () {
    // if (this.value == '1'); { No semicolon and I used === instead of ==
    if (this.value === '1'){
        $("#business").show();
    } else {
        $("#business").hide();
    }
});
// }); remove

    http://jsfiddle.net/Bushwazi/2kGzZ/3/

    I had to clean up the html & js...I couldn't help myself.

    HTML:

    <select id='purpose'>
    <option value="0">Personal use</option>
    <option value="1">Business use</option>
    <option value="2">Passing on to a client</option>
</select>
<form id="business">
    <label for="business">Business Name</label>
    <input type='text' class='text' name='business' value size='20' />
</form>

    CSS: 

    #business {
  display:none;
}

    JS:

    $('#purpose').on('change', function () {
    if(this.value === "1"){
        $("#business").show();
    } else {
        $("#business").hide();
    }
});
    0 讨论(0)
  • 予麋鹿
    2020-12-08 01:21

    try this which is working for me in my test demo

    <script>
$(document).ready(function(){
$('#dropdown').change(function() 
{ 
//  var selectedValue = parseInt(jQuery(this).val());
var text = $('#dropdown').val();
//alert("text");
    //Depend on Value i.e. 0 or 1 respective function gets called. 
    switch(text){
        case 'Reporting':
          // alert("hello1");
   $("#td1").hide();
            break;
        case 'Buyer':
      //alert("hello");
     $("#td1").show();   
            break;
        //etc... 
        default:
            alert("catch default");
            break;
    }
});
});

</script>
    0 讨论(0)
  • 感情败类
    2020-12-08 01:22 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
           $("#business_new").hide();
        $("#business").show();
      }
      else  if ( this.value == '2')
      {
          $("#business").hide();
        $("#business_new").show();
      }
       else  
      {
        $("#business").hide();
      }
    });
});
</script>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div style='display:none;' id='business'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' />
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
<div style='display:none;' id='business_new'>Business Name<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value="1254" size='20' />
    <input type='text' class='text' name='business' value size='20' />
    <br/>
</div>
</body>
    0 讨论(0)
  • 长情又很酷
    2020-12-08 01:23

    Wrap the code within $(document).ready(function(){...........}); handler , also remove the ; after if

    $(document).ready(function(){
    $('#purpose').on('change', function() {
      if ( this.value == '1')
      //.....................^.......
      {
        $("#business").show();
      }
      else
      {
        $("#business").hide();
      }
    });
});

    Fiddle Demo

    0 讨论(0)
  • 迷失自我
    2020-12-08 01:23

    you have error in your code unexpected token.use:

      $('#purpose').on('change', function () {
   if (this.value == '1') {
    $("#business").show();
    } else {
    $("#business").hide();
   }

   });

    Demo

    Update: You can narrow down the code using .toggle()

     $('#purpose').on('change', function () {
   $("#business").toggle(this.value == '1');
 });
    0 讨论(0)
  • 情书的邮戳
    2020-12-08 01:30

    You need to either put your code at the end of the page or wrap it in a document ready call, otherwise you're trying to execute code on elements that don't yet exist. Also, you can reduce your code to:

    $('#purpose').on('change', function () {
    $("#business").css('display', (this.value == '1') ? 'block' : 'none');
});

    jsFiddle example

    0 讨论(0)
 看不清?
提交回复
热议问题