Question

如何创建一个jsp页面，其中我在html下拉列表中有3个选项（使用'option'选项），当我选择每个选项时，必须根据选项显示不同的表。

我的HTML代码是：

<html>
<title>
customer info
</title>
<body>
<center>CUSTOMER INFORMATION</center>
Customer Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name"/>
<br>Customer Segment/Type:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select>
  <option value="prepaid">prepaid</option>
  <option value="postpaid">postpaid</option>
  </select>
  <br>Circle:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <select>
  <option value="Tamil Nadu">Tamil Nadu</option>
  <option value="Gujarat">gujarat</option>
  <option value="Maharashtra">Maharashtra</option>
  </select>
  <CENTER>SERVICE INFORMATION</CENTER>
  select package:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <select>
  <option value="silver">silver</option>
  <option value="gold">gold</option>
  <option value="platinum">platinum</option>

</select>
<form action="my_package">
<input type="submit" value="show package" name="Submit" />
</form>
</html>

对于每种类型的包，必须显示描述包的不同表。

Answer 1

您需要将hide/show绑定到select标记的change函数，

<select id="myselection"> 
    <option id="si" selected>SI</option> 
    <option id="iu">IU</option> 
</select>

<script>
$('#myselection').bind('change', function(){
    if($('#myselection option:selected').attr('id') == "si"){
       $('#si_table').show();
       $('#iu_table').hide();
    }
    else if($('#myselection option:selected').attr('id') == "iu"){
       $('#si_table').hide();
       $('#iu_table').show();
    }
});
</script>

＆＃13;

    $('#myselection').on('change', function() {
      if ($('#myselection option:selected').attr('id') == "si") {
        $('#si_table').show();
        $('#iu_table').hide();
      } else if ($('#myselection option:selected').attr('id') == "iu") {
        $('#si_table').hide();
        $('#iu_table').show();
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your drop down</label>&nbsp;
<select id="myselection">
  <option id="si" selected>SI</option>
  <option id="iu">IU</option>
</select>



<div id="si_table">
  <p>First Table</p>
  <table border=1>
    <thead>
      <tr>
        <th>Lorem</th>
        <th>Ipsum</th>
        <th>Dolor</th>
        <th>Sit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sit</td>
        <td>Dolor</td>
        <td>Ipsum</td>
        <td>Lorem</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Dolor</td>
        <td>Ipsum</td>
        <td>Lorem</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="iu_table">
  <p>Second Table</p>
  <table>
    <thead>
      <tr>
        <th>Lorem</th>
        <th>Ipsum</th>
        <th>Dolor</th>
        <th>Sit</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sit</td>
        <td>Dolor</td>
        <td>Ipsum</td>
        <td>Lorem</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Dolor</td>
        <td>Ipsum</td>
        <td>Lorem</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

根据选择在html中显示表格

1 个答案: