求助：使用jQuery修改指定层级Select的空值选项文本

问题背景 #

页面存在两个层级联动的Select控件：

• 一级控件（data-level="1"）用于选择地区（Region）
• 二级控件（data-level="2"）用于选择对应区域（Area）

但系统生成时，两个控件的空值选项（value=""）文本均为“Select Region”，需要在页面加载时通过jQuery将二级控件的空值选项文本改为“Select Area”。

实现方案 #

修改后的jQuery代码 #

(function($) {
  $(document).ready(function() {
    // 定位二级Select的空值选项并修改显示文本
    $('select.listdom-location[data-level="2"] option[value=""]').text('Select Area');
    // 同步更新placeholder属性，保持显示一致性
    $('select.listdom-location[data-level="2"]').attr('placeholder', 'Select Area');
  });
})(jQuery);

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lsd-search-filter lsd-col-10">
  <label for="lsd_search_10574_listdom-location">Regions</label>
  <div class="lsd-hierarchical-dropdowns" id="lsd_search_10574_listdom-location_wrapper" data-for="listdom-location" data-id="lsd_search_10574_listdom-location" data-max-levels="2" data-name="sf-listdom-location" data-hide-empty="0">
    <select class="listdom-location" name="sf-listdom-location" id="lsd_search_10574_listdom-location_1" placeholder="Select Region" data-level="1">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-0" value="289">Region 1</option>
      <option class="lsd-option lsd-parent-0" value="391">Region 2</option>
      <option class="lsd-option lsd-parent-0" value="290">Region 3</option>
    </select>
    <select class="listdom-location" name="" id="lsd_search_10574_listdom-location_2" placeholder="Select Region" data-level="2">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-289" value="291">Area 1</option>
      <option class="lsd-option lsd-parent-289" value="292">Area 2</option>
    </select>
  </div>
</div>

<script>
(function($) {
  $(document).ready(function() {
    $('select.listdom-location[data-level="2"] option[value=""]').text('Select Area');
    $('select.listdom-location[data-level="2"]').attr('placeholder', 'Select Area');
  });
})(jQuery);
</script>

关键说明 #

• DOM加载时机：使用$(document).ready()确保操作在DOM完全加载后执行，避免因元素未渲染导致选择器失效
• 精准选择器：通过select.listdom-location[data-level="2"] option[value=""]精确匹配二级控件的空值选项，不会影响其他元素
• 一致性优化：同步修改控件的placeholder属性，避免控件属性与选项文本不一致的视觉问题

内容的提问来源于stack exchange，提问作者Faye D.