Как добавить новую опцию selectbox со значением ее метки с jquery?

Question

Мне нужно получить заполнитель для предопределенного поля выбора (я не могу добавить первый вариант самостоятельно, потому что он взят из системы, которую использует мой клиент - Pardot).

Я добавил заполнители для полей ввода с 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>'); 

Может кто-то помочь мне сделать это автоматический. Лучшим решением будет вытащить контент из метки и добавить новую опцию со значением этого поля. И сделать цикл для каждого выпадающего списка, если их больше одного.

EDIT: Первая часть кода js предназначена для добавления заполнителей в поля ввода (добавляет его, чтобы выбрать, возможно, я мог бы вытащить значение заполнителя и поместить его в новую опцию).

Answer 1

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>