如何通过CSS在下拉列表<select>中选择和更改值

时间:2016-07-28 19:33:45

标签: html css select replace

在此先感谢您的帮助。 鉴于下面的HTML,如何使用CSS在下拉列表中找到“请选择...”值并将其替换为“选择状态”? &lt; span class =“label”&gt;&lt; label for =“state”&gt; STATE&lt; / label&gt;&lt; / span&gt; &lt; select id =“state”name =“state”class =“inputbox”size =“1”&gt;     &lt; option value =“”&gt;请选择...&lt; / option&gt;     &lt; option value =“AL”class =“USA”&gt; AL&lt; / option&gt;     &lt;! - 为了简洁而截断 - &gt;     &lt; option value =“WI”class =“USA”&gt; WI&lt; / option&gt; &LT; /选择&GT; 再次感谢!

1 个答案:

答案 0 :(得分:1)

使用CSS无法完成此操作。 (CSS无法在文档中查询内容字符串并替换)

使用 JavaScript 或专为DOM操作设计的流行JS库,如jQuery

使用

示例

&#13;
&#13;
$("#state option").text(function(idx, txt) {
  if(txt==="Please Select...") return "Choose a State";
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="label"><label for="state">STATE</label></span>
<select id="state" name="state" class="inputbox" size="1">
  <option value="">Please Select...</option>
  <option value="AL" class="USA">AL</option>

  (truncated for brevity) 

  <option value="WI" class="USA">WI</option>
</select>
&#13;
&#13;
&#13;