代码之家  ›  专栏  ›  技术社区  ›  vee

如何通过选择显示/隐藏分隔符。(jquery)

  •  5
  • vee  · 技术社区  · 17 年前

    我的代码:

    <select id="select">
    <option id="1" value="thai language">option one</option>
    <option id="2" value="eng language">option two</option>
    <option id="3" value="other language">option three</option>
    </select>
    
    <div id="form1">content here</div>
    <div id="form2">content here</div>
    <div id="form3">content here</div>
    

    我想在选择选项1并隐藏Form2+Form3时显示Div Form1,或者 选择选项2显示“表格2”并隐藏“表格1+表格2”

    5 回复  |  直到 10 年前
        1
  •  15
  •   Paolo Bergantino    17 年前
    $('#select').change(function() {
       $('#form1, #form2, #form3').hide();
       $('#form' + $(this).find('option:selected').attr('id')).show();
    });
    

    请注意,ID不应该以数字开头,但上面应该这样做。

        2
  •  2
  •   Tony Borf    17 年前

    如果你的表单很大,你可以把它们放在像这样的单独文件中,

    $(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>
    
        3
  •  0
  •   Tom    17 年前

    像这样?

    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;
    }
    
        4
  •  0
  •   jcuenod    17 年前

    只隐藏以前显示的DIV不是更好吗? 所以;

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

    请注意,ID不应该以数字开头,但上面应该这样做。

        5
  •  0
  •   Vladimir    10 年前

    更好的版本:

    $('#select').change(function() {
       $('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
       $('#form' + $(this).find('option:selected').attr('id')).show();
    });