Question

当前，我显示所有选项。选择该选项后，我只想显示结果。

选择了所选选项后，需要输入。

应该使用表tr td标签来完成。参见下面的示例

感谢您的解释，建议和支持。

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1').show();


if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   }   
  }
 });
});

$(document).ready(function(){
$('#router').prop('required',true);
$('#switch').prop('required',true);
$('#box').prop('required',true);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr>	
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>		
<option value="test1">test1 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50"></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"></td>
</tr>
<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>

Answer 1

这必须放在if / else语句中：

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1').show();

if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   $("#switch").prop('required',true);
   $("#router").prop('required',false);
   $("#box").prop('required',true);
   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',true);
   $("#box").prop('required',false);
   }   
  }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr>	
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>		
<option value="test1">test1 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>
<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>

Answer 2

由于没有必要，我用“ show（）”删除了该行。否则也不会。

$(document).ready(function(){

$('#problem').on('change', function(){

if (this.value) {
   if (this.value == 'test') {
      $('.display').show();
      $('.display_1').hide();
      $('.display_2').hide();
      $("#switch").prop('required',false);
      $("#router").prop('required',true);
      $("#box").prop('required',false);
      $("#sam").prop('required',false);
   }

   if (this.value == 'test1') {
      $('.display').hide();
      $('.display_1').show();
      $('.display_2').hide();
      $("#switch").prop('required',true);
      $("#router").prop('required',false);
      $("#box").prop('required',true);
      $("#sam").prop('required',false);
   }   
   
   if (this.value == 'test2') {
      $('.display').hide();
      $('.display_1').hide();
      $('.display_2').show();
      $("#switch").prop('required',false);
      $("#router").prop('required',false);
      $("#box").prop('required',false);
      $("#sam").prop('required',true);
   }         
  }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr>	
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>		
<option value="test1">test1 </option>
<option value="test2">test2 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_2" style="display:none;">
<td>Sam</td>
<td><input id="sam" name="sam" type="text" maxlength="50" size="50"  required></td>
</tr>


<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>

Answer 3

关于显示问题：只需将display:none;添加到您的display_1 CSS类中

如果您想将这些字段设为必填字段，则必须在提交表单之前先对其进行验证：Capturing a form submit with jquery and .submit

Answer 4

谢谢Mike，但是通过添加一行新的SAM（对于新的选择选项TEST2），它不再起作用了……它也显示在test和test1中……通常应该只显示在test2中……你明白为什么吗？

$(document).ready(function(){

$('#problem').on('change', function(){
$('.display, .display_1, .display_2').show();

if (this.value.trim()) {
   if (this.value !== 'test') {
   $('.display').hide();
   $("#switch").prop('required',true);
   $("#router").prop('required',false);
   $("#box").prop('required',true);
   $("#sam").prop('required',true);

   }

else if (this.value !== 'test1') {
   $('.display_1').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',true);
   $("#box").prop('required',false);
   $("#sam").prop('required',true);

   }   
   
   else if (this.value !== 'test2') {
   $('.display_2').hide();
   $("#switch").prop('required',false);
   $("#router").prop('required',false);
   $("#box").prop('required',false);
   $("#sam").prop('required',true);

   }   
   
   
  }
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form id="e">
<table id="tableId">
<tr>	
<td>Problem:</td>
<td><select required id="problem" name="problem">
<option value=""></option>
<option value="test">test</option>		
<option value="test1">test1 </option>
<option value="test2">test2 </option>
</select>
</td>
</tr>


<tr class="display" style="display:none;">
<td>Router</td>
<td><input id="router" name="router" type="text" maxlength="50" size="50" required></td>
</tr>

<tr class="display_1" style="display:none;">
<td>Switch</td>
<td><input id="switch" name="switch" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_1" style="display:none;">
<td>Box</td>
<td><input id="box" name="box" type="text" maxlength="50" size="50"    required></td>
</tr>


<tr class="display_2" style="display:none;">
<td>Sam</td>
<td><input id="sam" name="sam" type="text" maxlength="50" size="50"  required></td>
</tr>


<tr>
 <td><input type="submit"  class="submit" value="submit"></td>
</tr>
</table>
</form>

jQuery仅在选择选项表之后显示结果

4 个答案: