how to show/hide divs by select.(jquery)

后端 未结 5 1233
野趣味
野趣味 2020-12-14 13:39

my code:


                        
    
提交评论

  • 2020-12-14 14:19

    Wouldn't it be better to only hide the previously shown div? So;

    var selection = 0;
    $('#select').change(function() {
      $('#form' + selection).hide();
      selection = $(this).val();
      $('#form' + selection).show();
    });
    

    Do note that IDs should not start with numbers, but the above should do it.

    0 讨论(0)
  • 2020-12-14 14:23
    $('#select').change(function() {
       $('#form1, #form2, #form3').hide();
       $('#form' + $(this).find('option:selected').attr('id')).show();
    });
    

    Do note that IDs should not start with numbers, but the above should do it.

    0 讨论(0)
  • 2020-12-14 14:27

    Something like this?

    var optionValue = $("#select").val();
    
    $('#form1, #form2, #form3').hide();
    
    switch(optionValue)
    {
    case 1:
      $("#form1").show();
      break;
    case 2:
      $("#form2").show();
      break;
    case: 3:
      $("#form3").show();
      break;
    }
    
    0 讨论(0)
  • 2020-12-14 14:35

    If your forms are large, you can put them in separate files like this,

    $(document).ready(function() {
         $('#select').change(function() {
             $("#myform").load(this.value);
         });
     });
    
    
    <select id="select">
    <option value="blank.htm">Select A Form</option>
    <option value="test1.htm">option one</option>
    <option value="test2.htm">option two</option>
    <option value="test3.htm">option three</option>
    </select>
    
    <div id="myform" ></div>
    
    0 讨论(0)
  • 提交回复
    热议问题