Question

我想使用下拉列表来控制我想要创建的菜单的格式。我已经在网上搜索了几个小时但没有成功。我们希望通过下拉菜单创建一个格式可控的表单。我在下面使用html代码创建了一个非常简单的Web表单来演示;

我们要做的是向用户提供表单，具体取决于他们选择“申请人数量”下拉菜单。因此，如果用户选择1，则仅呈现“申请人1标题”下拉列表。如果用户选择2，则“申请人1标题”和“申请人2标题”下拉列表都会呈现给用户。

这是否有人在这里遇到过什么？

 <html>
    <body>
    <form/>
    
    <label for="txt_appnos">Number of Applicants:</label>          
    <select id="txt_appnos" name="appnos">
      <option value="appnos1">1</option>
      <option value="appnos2">2</option>
    </select> 
    <br>     
    <br>     
    
    	
    <label for="txt_title1">Applicant 1 Title:</label>          
    <select id="txt_title1" name="title1">
      <option value="MR1">MR</option>
      <option value="MRS1">MRS</option>
      <option value="MISS1">MISS</option>
      <option value="MS1">MS</option>
    </select>      
    
    <br>     
    <br>     
    
    <label for="txt_title2">Applicant 2 Title:</label>          
    <select id="txt_title2" name="title2">
      <option value="MR2">MR</option>
      <option value="MRS2">MRS</option>
      <option value="MISS2">MISS</option>
      <option value="MS2">MS</option>
    </select> 
    
    </form>
    </body>
    </html>

Answer 1

请尝试以下代码。

＆＃13;

$('#appnos').on('change', function() {
    var val = $(this).val();
    $('#form1').hide();
    $('#form2').hide();
    $('#' + val).show();
});

＆＃13;

.hidden {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<label for="txt_appnos">Number of Applicants:</label>          
<select id="appnos" name="appnos">
  <option value="form1">1</option>
  <option value="form2">2</option>
</select> 
<br>     
<br>     


<form id="form1" class="hidden">
<label for="txt_title1">Applicant 1 Title:</label>          
<select id="txt_title1" name="title1">
  <option value="MR1">MR</option>
  <option value="MRS1">MRS</option>
  <option value="MISS1">MISS</option>
  <option value="MS1">MS</option>
</select> 
</form>     

<form id="form2" class="hidden">
<label for="txt_title2">Applicant 2 Title:</label>          
<select id="txt_title2" name="title2">
  <option value="MR2">MR</option>
  <option value="MRS2">MRS</option>
  <option value="MISS2">MISS</option>
  <option value="MS2">MS</option>
</select>
</form>

＆＃13;

使用下拉列表来控制表单

1 个答案: