选择带有“请选择”提示信息的选项标签

Question

我想要一个下拉列表，其中包含以下选项，并在未选择任何选项时显示“请选择”。我已经使用下面的代码实现了它，并且在选择选项时表单会被提交，但问题是当我返回页面并选择第一个选项即“--请选择--”时，我的表单也会被提交。有没有办法在未选择任何选项时显示“--请选择--”选项，并防止该特定的“--请选择--”选项提交表单？

<select onchange="this.form.submit()">
    <option>--Please Select--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

- prakashchhetri

---

你没有进行任何错误捕获以确保已选择一个选项值吗？ - Ryan Beaulieu

你可以添加一个检查来查看选择了哪个选项...但只需用常规链接替换整个内容。 - Quentin

Answer 1

你可以使用 <option selected="selected" disabled="true"> 标签。其中，选中的选项会成为默认选项，而禁用则会使其无法被点击。

示例：Demo

<select onchange="this.form.submit()">
  <option selected="selected" disabled="true">--Please Select --</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

- Andy

Answer 2

使“请选择”选项不可用。这样，该选项将被最初选择，但不能再次选择。

<select onchange="this.form.submit()">
    <option disabled="true">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

- Austin Brunkhorst

Answer 3

这里是你需要的 :)

<select onchange="if(this.value!='') this.form.submit();">
    <option value="">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

- raidenace

Answer 4

你可以在JavaScript中完成它。

<select onchange="if (this.selectedIndex !=0) { this.form.submit(); }">
    <option>--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

由于这是一个PHP，您可能正在动态生成选择选项，因此您可能需要稍微更改代码。

- Kris Zani