Question

我正在创建一个带有下拉菜单的表单，但问题是，您可以选择不需要的“请选择”选项

 <p class="text-grey">Membership type? (please select)</p>
    <select class="city-town font"  name="eventtype" required>
    <option>Bronze</option>
    <option>Silver</option>
    <option>Gold</option>
    </select>

因此，我创建了它，因此“请选择文本显示为灰色” 但是然后，代码的“必需”部分将无法工作，不确定为什么吗？

<p class="text-grey">Membership type? (please select)</p>
    <select class="city-town font"  name="eventtype" required>
    <option disabled="" selected="" value="0" >Please Select</option>
    <option value="">Bronze</option>
    <option value="">Silver</option>
    <option value="">Gold</option>
    </select>

有什么想法吗？

Answer 1

应归功于贷方。原始帖子来自{@ 3}上的@Gambit，请支持他的解决方案。

即使禁用了提交，提交也将始终注册在<option>元素上选择的字段。我不知道为什么会这样，但是它在那里。

不是在元素上设置selected属性，而是让disable和hidden属性。它不需要样式，并且可以使<option>变灰，不可选择并且没有设置默认值。

所以在这里写下的代码：

<option disabled="" selected="" value="0" >Please Select</option>

应写为：

<option hidden value="">Please Select</option>

在此示例中进行检查：

<form>
  <label for="eventtype">Choose Membership</label>
  <select id="eventtype" class="city-town font" name="eventtype" required>
    <option hidden value="" >Select Membership</option>
    <option value="bronze" >Bronze</option>
    <option value="silver" >Silver</option>
    <option value="gold" >Gold</option>
  </select>
  <input type="submit" value="Choose">
</form>

表单的下拉菜单-使用“必需”代码不起作用

1 个答案: