Question

我试图隐藏下拉菜单中的占位符文本，以使其不显示为可选选项。我在堆栈溢出时搜索了其他选项，并尝试了以下解决方案，但没有一个起作用：

<option style="display:none" >Select Stop</option>
<option value="" disabled selected hidden >Select Stop</option>
<option value="" disabled selected style="display: none;">Select Stop</option>

我的代码看起来像这样，但是在stackoverflow中起作用，但是当我使用最新版本的chrome将其放入我的网站时却没有...

<select>
  <option value="" disabled selected hidden>Select Stop</option>
  <option value="home">home</option>
  <option value="school">school</option>
  <option value="office">office</option>
</select>

Answer 1

不确定您实际上要实现什么，将选择或选项隐藏即可，只需向其添加禁用，请参见下文，我有2个选择，其中一个选项已取消，另一个则整个选择都已禁用

        <select>
            <option value="">Select Stop</option>
			<option value="home" >home</option>
			<option value="school" disabled>school</option>
			<option value="office" >office</option>
        </select>

      <select disabled>
            <option value="" >Select Stop</option>
			<option value="home" >home</option>
			<option value="school" >school</option>
			<option value="office" >office</option>
        </select>

Answer 2

也许您可能想在文件中添加一些JQuery

 $(function() {
            $('.location').find('option:contains(office)').hide();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='location'>
  <option value="select stop">Select Stop</option>
  <option value="home">home</option>
  <option value="school">school</option>
  <option value="office">office</option>
</select>

隐藏下拉菜单中的占位符文本

2 个答案: