如何使用JavaScript生成輸入類型下拉列表？

Question

嗨，我正在使用codeigniter。 單擊按鈕時，我正在使用javascript動態添加行。 這是我的劇本

<script>
function displayResult() {
    var row = document.getElementById("test").insertRow(-1);
    row.innerHTML = '<td><input type="text" name="employee[]" value="" style="width:80px;"/></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
</script> 

在此腳本中，我正在生成包含許多文本框的行。 現在，我需要一個form_dropdown而不是腳本中的第一個文本框（ employee[] ）我的form_dropdown代碼：在這里，我從控制器文件中獲取數據。 我的數據庫中有此員工詳細信息

<?php
      //form data
      $attributes = array('class' => 'form-horizontal', 'id' => '');
      $options_employee = array('' => "Select");
      foreach ($employee as $row)
      {
        $options_employee[$row['name']] = $row['name'];
      }

      ?>

這就是我在查看頁面中使用它的方式。

<?php
          echo '<div class="control-group">';

            echo '<div class="controls">';

              echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');

            echo '</div>';
          echo '</div">';

          ?>

有人可以如何幫助我編碼？ 編輯01：

Answer 1

當您擁有數據數組時，下拉菜單在JS中非常容易。

您可以將JS本機地圖函數與數組一起使用，以輕松呈現菜單，如下所示。

JSON /對象：

$options_employee: [
  'Michael',
  'John',
  'Sam'
]

HTML：

<div id="employee-menu">
  <div class="control-group">
    <div class="controls">
      <select name="employee" class="span2">
        <option></option>
      </select>
    </div>
  </div>
</div>

JS：

mag.module("employee-menu", {
  view: function(state, props) {
    state.option = props.$options_employee.map(function(employee, key) {
      return {
        _value: key,
        _text: employee
      }
    })
  }
}, props)

這是完整的工作示例： http : //jsbin.com/pexifodari/edit?html,js,output

希望有幫助！