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选项中，例如，链接到Select1的项目列在Mango下面。

我做了一个var：

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

现在我想将此变量添加到select中的Mango选项下方（或链接）的Option值中。我已经查看了追加函数，但我似乎无法弄清楚如何直截了当。

我在jquery中发出了一个select请求，它在下拉列表中添加了主题。但我想把它放在芒果选项之下..

这是代码

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

Answer 1

这将帮助您入门。如果您有一组附加选项，则可以遍历select元素并按索引-1加载。

＆＃13;

$(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'));
});

＆＃13;

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

＆＃13;

多个变量变为选项值

1 个答案: