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

我需要获取预定义选择框的占位符（不能自己添加第一个选项，因为它是从我的客户端使用的系统中获取的 - Pardot）。如何使用jquery添加带有标签值的新选择框选项？

我为JQuery添加了输入字段的占位符，如果有一个下拉列表，我可以添加它。但是如果有不止一个，我需要自动进行。

这是我的CURENT代码：

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>');

<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>

在选择框中这个例子中第一个选项是通过自己加入

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

有人可以帮助我，使之自动。最好的解决方案是从标签中提取内容并添加具有该字段值的新选项。如果有多个下拉菜单，则为每个下拉菜单制作循环。

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

来源

2017-01-18 Goran Stanković

找到解决方案：http://stackoverflow.com/questions/28085698/add-text-to-option-from-the-label-with-pure-js –

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); 
 
});

<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>

这里

来源

2017-04-21 09:21:53

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

回答

相关问题