Jquery 获取下拉标签并设置默认 select 选项项占位符

Question

我继承了一些 php 处理下拉菜单 select 并且需要做一个小改动：移动标签，使其成为默认的下拉占位符（而不是第一个选项）。我可以修改 php 文件，但它可能会在某个时候收到自动更新，然后我必须再次修改它。相反，我想使用 jquery 来移动标签。我搜索了论坛，但没能完全找到我要找的东西并让它发挥作用。

我继承的代码与此类似；

<form id="currency_converter">
 <label for="currency_switcher" class="currency_switcher_label">Choose a Currency</label>
  <select id="currency_switcher" class="currency_switcher select">
      <? foreach ( $currencies as $currency ) {
       $html .= '<option value="' . esc_attr( $currency ) . '">'</option>';
      } ?>
  </select>
</form>

看起来像这样：

但是，我希望它将 "Choose a Currency" 显示为下拉列表中的第一个值/占位符。

这是我有但没有用的：

$("#currency_converter select").each(function() {
    var text = $(this).prev("label").text();
    $(this).children("option[selected='selected']").val(text).text(text);
});

这是我正在处理的 jsfiddle：它有效，但它替换了第一个下拉条目，我想在前面加上而不是替换....

http://jsfiddle.net/clappertrapp/79uxp4rt/

Answer 1

It works, but it replaces the first dropdown entry and I want to prepend not replace....

您可以简单地使用 prepend 方法来执行此操作，并且还需要使用 .prop("selected", true) 以便在页面加载时默认选择它：

$(function() {
  $("#currency_converter select").each(function() {
    var text = $(this).prev("label").text();
    var $option = $("<option />").attr("value", text).text(text).prop("selected", true)
    $(this).prepend( $option )
  }).prev().hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="currency_converter">
  <label for="currency_switcher" class="currency_switcher_label">Choose a Currency</label>
  <select id="currency_switcher" class="currency_switcher select">
    <option value="USD">USD</option>
    <option value="AUD">AUD</option>
    <option value="GBP">GBP</option>
    <option value="EUR">EUR</option>
  </select>
</form>

Jquery 获取下拉标签并设置默认 select 选项项占位符

Jquery Get Dropdown Label and make the default select option item placeholder

jquery

select

placeholder