如何使用JavaScript生成输入类型下拉列表？

Question

Hi I am using codeigniter. I am adding row dynamically using javascript when button is clicked. Here is my script

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

Here in this script I am generating a row with many textbox. Now I need to have a form_dropdown instead of the first text box in the script( employee[] ) My form_dropdown code: Here I get the data from the controller file. I have this employee detail in my database

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

      ?>

This is how I use it in view page.

<?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">';

          ?>

How to do this can someone help me code? Edit 01:

Answer 1

Dropdowns are really easy in JS when you have the data array.

You can use the JS native map function with arrays to easily render menus like the following.

JSON/Object:

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

Here is the full working example: http://jsbin.com/pexifodari/edit?html,js,output

Hope that helps!