javascript - 如何创建一个可以从 Javascript 数组中选择的选择选项？

Question

<div class="row" id="gas_analyte1">
              <div class="col-md-3">
                Gas Analyte 1<br>
                <%= f.select :gas_analyte, @Gases, {include_blank: 'Select Gas', size:15},{style: "width:150px;",class: "gas_search"} %><br>              
              </div>
</div>

@Gases 是在 Controller 中创建的一系列气体，例如一氧化碳。

在 Javascript 中，如果用户单击添加按钮，我想向输入页面添加另一个选择框，所以到目前为止我已经做到了

$('#gas_analyte_btn').click(function(){
    $('#gas_analytes').append('<div id="gas_analyte'+(i).toString()+'" class="row"><div class="col-md-3">Gas Analyte '+(i).toString()+'<br><input size="15" type="text" name="search[gas_analyte'+(i).toString()+']" id="search_gas_analyte'+(i).toString()+'" />
});

我遇到的问题是 javascript 创建了一个 Textarea 而不是一个选择选项。如何创建一个可以从 Javascript 中的 @Gases 中选择的选项？

谢谢

Answer 1

$('#gas_analyte_btn').click(function(){
  let value = $(this).siblings('input[type="text"]').val();
  if (value.length > 0) {
    $('#myselect').append($('<option>'+value+'</option>'))
                  .val(value); // selects the new value
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row" id="gas_analyte1">
  <div class="col-md-3">
    <select id="myselect">
      <option>Helium</option>
      <option>Hydrogen</option>
      <option>Oxygen</option>
    </select>
  </div>
  <div class="add_option">
    <input type="text"/>
    <button id="gas_analyte_btn">Add Option</button>
  </div>
</div>

您还可以使用 jQuery 或普通 DOM 以编程方式创建 HTML 元素和片段，而不是完全不可读的字符串连接混合物:

var id = i.toString();
var $in = $('<input>').attr({ 
  name: 'search[gas_analyte'+i+']',
  id: 'search_gas_analyte'+i
});
# ...