Mehrere Variablen in Optionswert

Question

Ich habe eine einfache Form mit einigen Optionen, die standardmäßig deaktiviert und ausgegraut sind.

<select name="template" id="template" size="1" > 
    <option disabled selected value="1" name="1" id="1" class="bold-option">Mango</option> 
    <option class="select1"></option> 
    <option disabled selected value="2" class="bold-option" >Apple</option> 
    <option disabled selected value="3" class="bold-option">Pineapple</option> 
    <option disabled selected value="4" class="bold-option">Brocolli</option> 
    <option disabled selected value="5" class="bold-option">Peach</option> 
    <option disabled selected value="6" class="bold-option">Strawberry</option> 
</select> 

Die Idee dahinter ist, dass ich mehrere Variablen wollen, die von JQuery definiert sind, werden beispielsweise in die select1 Option eingeführt zu werden, so dass die Elemente, die zu Select1 verknüpft sind, werden unter Mango aufgeführt.

Ich habe eine var gemacht:

var issueTemplates = [ 
    {'subject': 'This is a mango'} 
]; 

Jetzt möchte ich diese Variable in den Optionswert unter hinzuzufügen (oder verbunden) mit der Mango-Option innerhalb der Auswahl. Ich habe in die Append-Funktion geschaut, aber ich kann nicht herausfinden, wie ich das verstehen kann.

Ich habe eine Select-Anfrage in jquery gemacht, die den Betreff im Dropdown-Formular hinzufügt. Aber ich will es haben unter der Option Mango ..

Dies ist de Code

issueTemplates.forEach(function(item, idx) {  
$("select[id='template']").append('<option value="' + idx + '">' + item.subject + '</option>');   

Answer 1

Dies wird Ihnen den Start. Wenn Sie ein Array mit zusätzlichen Optionen haben, können Sie das Auswahlelement durchlaufen und nach Index -1 laden.

$(document).ready(function() { 
 
    var fruit = ['mango', 'apple', 'pineapple', 'brocolli', 'peach', 'strawberry'] 
 
    $('#template option').each(function() { 
 
    val = $(this).val(); 
 
    $(this).after('<Option val = ' + val + '>This is a ' + fruit[val - 1] + '</option>'); 
 
    }); 
 
    console.log($('#template option')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="template" id="template" size="1"> 
 
    <option disabled selected value="1" name="1" id="1" class="bold-option">Mango</option> 
 
    <option disabled selected value="2" class="bold-option">Apple</option> 
 
    <option disabled selected value="3" class="bold-option">Pineapple</option> 
 
    <option disabled selected value="4" class="bold-option">Brocolli</option> 
 
    <option disabled selected value="5" class="bold-option">Peach</option> 
 
    <option disabled selected value="6" class="bold-option">Strawberry</option> 
 
</select>