如何使用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添加帶有標籤值的新選擇框選項？

回答

相關問題