选择选项时更改必填字段形式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择选项时更改必填字段形式相关的知识，希望对你有一定的参考价值。
我的表单如下
<form>
<div class="6 op" style="display: none;">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
在上面的代码中，required位于service和capacity中。我想知道如何仅在required字段中选择notes选项时自动将Hotspot添加到service字段。
您知道该怎么做吗？
谢谢
答案
您可以添加onchange事件处理程序以选择选项，并作为参数传递所选选项的值。在这种情况下，当值为热点时，可以使用setAttribute将属性required添加到文本区域，否则将其设置为false或使用removeAttribute删除它。 dom元素的id也必须是唯一的
let txtArea = document.getElementById('exampleFormControlTextarea1');
function changeService(val)
if (val.toLowerCase() === 'hotspot')
txtArea.setAttribute('required', true)
else
txtArea.setAttribute('required', false)
<form>
<div class="6 op" style="">
<div class="form-group"><label for='exampleFormControlSelect1'>Service</label>
<select onchange='changeService(this.value)' class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect2" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>另一答案
检查下面的简单示例，使用jquery，如果有人选择特定角色，则代码切换类并在所选元素上切换REQUIRED属性]
$('select#role').change(function()
let role = $(this).children("option:selected").val();
if (role == 0 )
$('.detailed').removeClass("detailed");
$('#employee').prop('required',true);
else
$('#staff').addClass("detailed");
$('#employee').prop('required',false);
); // close $('select#role').change(function()
另一答案
您可以使用jQuery实现。您需要在下拉菜单的onChange事件上将该字段设置为必填。
以上是关于选择选项时更改必填字段形式的主要内容，如果未能解决你的问题，请参考以下文章