Question

我有一个选择选项html，我需要隐藏其中一个选项只用css而不改变html结构，比如添加更多的类或id。

这是html结构：

<select id="net_terms_id" name="order[account][net_terms_id]" class="select admin__control-select">
       <option value>-Select Net Term-</option>
       <option value="Devtest">Devtest</option>
       <option value="15 Days Net">15 Days Net</option>
</select>

这是我到目前为止用css完成的事情：

#net_terms_id option:empty {display: none;}
#net_terms_id option[value=""] {display: none;}

Answer 1

您可以使用:first-child隐藏第一个选项。但它会显示为默认值。

#net_terms_id option:first-child {
   display:none;
}

你可以使用jquery来做到这一点。

$('#net_terms_id option').filter(function() {
  return !this.value || $.trim(this.value).length == 0 || $.trim(this.text).length == 0;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="net_terms_id" name="order[account][net_terms_id]" class="select admin__control-select">
       <option value>-Select Net Term-</option>
       <option value="Devtest">Devtest</option>
       <option value="15 Days Net">15 Days Net</option>
</select>

Answer 2

这就是你所需要的

<select>
  <option disabled selected>Choose..</option>
  <option>First option</option>
  <option>Second option</option>
</select>

Answer 3

我有一些疑问，如果它只与css有关。但也许这会有所帮助 [此代码隐藏了每个选择集中的第一个选项]：

document.getElementsByTagName("option")[0].style.display = "none";

或者像PraveenKumar所说的那样用CSS隐藏第一个选项。

Answer 4

如果您只想使用CSS隐藏空选项，则可以尝试添加selected disabled hidden style='display: none'，这样就可以解决问题。

<select id="net_terms_id" name="order[account][net_terms_id]" class="select admin__control-select">
       <option value selected disabled hidden style='display: none'>-Select Net Term-</option>
       <option value="Devtest">Devtest</option>
       <option value="15 Days Net">15 Days Net</option>
</select>

Answer 5

尝试：

#net_terms_id option[value=empty]  {}

使用css隐藏空选项值

5 个答案: