複数の変数をオプション値に入れよう

Question

私はシンプルなフォームを用意していますが、デフォルトでは無効にされ、グレー表示されています。

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

その背後にある考え方は、私はjQueryので定義されている複数の変数は、例えばSELECT1オプションにインポートなっているので、選択1にリンクされているアイテムは、マンゴーの下にリストされていたいということです。

私はVARを作った：

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

は、今私は、選択中のマンゴーオプションに下にオプション値にこの変数を追加します（またはリンク）したいです。私は追加機能を見てきましたが、私はこれをどのようにまっすぐにするのか分かりません。

jqueryでドロップダウンフォームに件名を追加する選択要求をしました。しかし、私は、これはあなたが始めるだろう

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

Answer 1

これはデコードは..ですマンゴーオプションの下にそれを持っていると思います。追加オプションの配列がある場合は、select要素を反復し、インデックス-1でロードできます。

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