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

Question

在此先感谢您的帮助。 鉴于下面的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; 再次感谢！

Answer 1

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

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

使用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;