Question

我需要为预定义的选择框获取占位符（不能自己添加第一个选项，因为它取自我的客户端使用的系统 - Pardot）。

我使用Jquery为输入字段添加了占位符，如果只有一个下拉列表，我可以添加它。但是如果有多个，我需要自动化。

这是我的代码：

＆＃13;

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);
    };
    $('.select').append( '<option disabled selected hidden>'+'Industry</option>' );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="field-label" for="133191_52859pi_133191_52859">Industry222</label>
<select name="133191_52859pi_133191_52859" id="133191_52859pi_133191_52859" class="select" onchange="" >
    <option value="664141" selected="selected"></option>
    <option value="664143">Account Source</option>
    <option value="664145">Ad Unit of Interest</option>
    <option value="664147">Advertising</option>
    <option value="664149">Aerospace &amp; Defense</option>
    <option value="664151">Agency</option>
    <option value="664153">Agriculture</option>
</select>

＆＃13;

在此示例中，我自己添加了选择框中的第一个选项

$('.select').append( '<option disabled selected hidden>'+'Industry</option>' );

有人可以帮助我让它自动化。最佳解决方案是从标签中提取内容并添加具有该字段值的新选项。并且如果有多个下拉列表，则为每个下拉列表生成循环。

编辑：js代码的第一部分用于在输入字段中添加占位符（它将其添加到select中，也许我可以拉取占位符的值并将其放在新选项中）。

Answer 1

＆＃13;

var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea 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;
 
  if (nextElement) {
    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);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p class="form-field industry pd-select required">
  <label class="field-label" for="133191_52859pi_133191_52859">Industry222</label>
  <select name="133191_52859pi_133191_52859" id="133191_52859pi_133191_52859" class="select" onchange="">
        <option value="664141" selected="selected"></option>
        <option value="664143">Account Source</option>
        <option value="664145">Ad Unit of Interest</option>
        <option value="664147">Advertising</option>
        <option value="664149">Aerospace &amp; Defense</option>
        <option value="664151">Agency</option>
        <option value="664153">Agriculture</option>
    </select>
</p>

＆＃13;

如何使用jquery添加带有标签值的新选择框选项？

1 个答案: