使用纯 JS 将文本添加到标签中的选项

Question

我有一个脚本将标签文本应用为输入的占位符属性，但是我有一个 select 下拉字段，我需要第一个选项（目前只是空白）来包含标签姓名。在这种情况下区域

我考虑过使用另一个 label.querySelectorAll("option"); 但是我不知道如何才能获得最高分。

当前 JS：

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += " *");
  label.nextElementSibling.setAttribute("placeholder", text);
  label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i){
    el.parentNode.removeChild(el);
});

HTML

<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
    <p class="form-field first_name pd-text required ">
        <input type="text" name="25492_61230pi_25492_61230" id="25492_61230pi_25492_61230" value="" class="text" size="30" maxlength="32" onchange="" placeholder="First Name *">
    </p>
    <div id="error_for_25492_61230pi_25492_61230" style="display:none"></div>
    <p class="form-field last_name pd-text required ">
        <input type="text" name="25492_61232pi_25492_61232" id="25492_61232pi_25492_61232" value="" class="text" size="30" maxlength="32" onchange="" placeholder="Last Name *">
    </p>
    <div id="error_for_25492_61232pi_25492_61232" style="display:none"></div>
    <p class="form-field company pd-text required ">
        <input type="text" name="25492_61234pi_25492_61234" id="25492_61234pi_25492_61234" value="" class="text" size="30" maxlength="100" onchange="" placeholder="Company *">
    </p>
    <div id="error_for_25492_61234pi_25492_61234" style="display:none"></div>
    <p class="form-field Mobile pd-text ">
        <input type="text" name="25492_61236pi_25492_61236" id="25492_61236pi_25492_61236" value="" class="text" size="30" maxlength="65535" onchange="" placeholder="Phone">
    </p>
    <div id="error_for_25492_61236pi_25492_61236" style="display:none"></div>
    <p class="form-field email pd-text required ">
        <input type="text" name="25492_61238pi_25492_61238" id="25492_61238pi_25492_61238" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61238, 12536766);" placeholder="Email *">
    </p>
    <div id="error_for_25492_61238pi_25492_61238" style="display:none"></div>
    <p class="form-field Territory_copy pd-select required ">
        <select name="25492_61240pi_25492_61240" id="25492_61240pi_25492_61240" class="select" onchange="" placeholder="Region *">
            <option value="" selected="selected"></option>
            <option value="465100">North America</option>
            <option value="465102">Latin America</option>
            <option value="465104">Europe</option>
            <option value="465106">Australasia</option>
            <option value="465108">ASPAC - South East Asia</option>
            <option value="465110">ASPAC - China</option>
            <option value="465112">Africa - West Africa</option>
            <option value="465114">Africa - North Africa &amp; Middle East</option>
            <option value="465116">Africa - Non Regional</option>
            <option value="465118">Africa - Southern Africa</option>
        </select>
    </p>
    <div id="error_for_25492_61240pi_25492_61240" style="display:none"></div>
    <p class="form-field comments pd-textarea required ">
        <textarea name="25492_61242pi_25492_61242" id="25492_61242pi_25492_61242" onchange="" cols="40" rows="10" class="standard" placeholder="Message *"></textarea>
    </p>
    <div id="error_for_25492_61242pi_25492_61242" style="display:none"></div>
    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
        <input type="text" name="pi_extra_field" id="pi_extra_field" placeholder="Comments">
    </p>
    <input name="_utf8" type="hidden" value="☃">
    <p class="submit">
        <input type="submit" accesskey="s" value="Send Message">
    </p>
    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>

Answer 1

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += " *");
  var nextElement = label.nextElementSibling;
  // This is what I changed:
  if (nextElement.tagName == 'SELECT') {
    nextElement.options[0].text = text;
  } else {
    nextElement.setAttribute("placeholder", text);
  }
  label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
  el.parentNode.removeChild(el);
});

<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
  <p class="form-field first_name pd-text required ">
    <label>some name</label>
    <input type="text" name="25492_61230pi_25492_61230" id="25492_61230pi_25492_61230" value="" class="text" size="30" maxlength="32" onchange="" placeholder="First Name *">
  </p>
  <div id="error_for_25492_61230pi_25492_61230" style="display:none"></div>
  <p class="form-field last_name pd-text required ">
    <input type="text" name="25492_61232pi_25492_61232" id="25492_61232pi_25492_61232" value="" class="text" size="30" maxlength="32" onchange="" placeholder="Last Name *">
  </p>
  <div id="error_for_25492_61232pi_25492_61232" style="display:none"></div>
  <p class="form-field company pd-text required ">
    <input type="text" name="25492_61234pi_25492_61234" id="25492_61234pi_25492_61234" value="" class="text" size="30" maxlength="100" onchange="" placeholder="Company *">
  </p>
  <div id="error_for_25492_61234pi_25492_61234" style="display:none"></div>
  <p class="form-field Mobile pd-text ">
    <input type="text" name="25492_61236pi_25492_61236" id="25492_61236pi_25492_61236" value="" class="text" size="30" maxlength="65535" onchange="" placeholder="Phone">
  </p>
  <div id="error_for_25492_61236pi_25492_61236" style="display:none"></div>
  <p class="form-field email pd-text required ">
    <input type="text" name="25492_61238pi_25492_61238" id="25492_61238pi_25492_61238" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61238, 12536766);" placeholder="Email *">
  </p>
  <div id="error_for_25492_61238pi_25492_61238" style="display:none"></div>
  <p class="form-field Territory_copy pd-select required ">
    <label>Some label</label>
    <select name="25492_61240pi_25492_61240" id="25492_61240pi_25492_61240" class="select" onchange="" placeholder="Region *">
      <option value="" selected="selected"></option>
      <option value="465100">North America</option>
      <option value="465102">Latin America</option>
      <option value="465104">Europe</option>
      <option value="465106">Australasia</option>
      <option value="465108">ASPAC - South East Asia</option>
      <option value="465110">ASPAC - China</option>
      <option value="465112">Africa - West Africa</option>
      <option value="465114">Africa - North Africa &amp; Middle East</option>
      <option value="465116">Africa - Non Regional</option>
      <option value="465118">Africa - Southern Africa</option>
    </select>
  </p>
  <div id="error_for_25492_61240pi_25492_61240" style="display:none"></div>
  <p class="form-field comments pd-textarea required ">
    <textarea name="25492_61242pi_25492_61242" id="25492_61242pi_25492_61242" onchange="" cols="40" rows="10" class="standard" placeholder="Message *"></textarea>
  </p>
  <div id="error_for_25492_61242pi_25492_61242" style="display:none"></div>
  <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
    <input type="text" name="pi_extra_field" id="pi_extra_field" placeholder="Comments">
  </p>
  <input name="_utf8" type="hidden" value="☃">
  <p class="submit">
    <input type="submit" accesskey="s" value="Send Message">
  </p>
  <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>

使用纯 JS 将文本添加到标签中的选项

Add Text to option from the label with pure JS

html

javascript

forms

placeholder