如何使用javascript生成输入类型下拉列表?

时间:2015-09-18 08:48:27

标签: javascript php jquery codeigniter

您好我正在使用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: enter image description here

1 个答案:

答案 0 :(得分:0)

当您拥有数据阵列时,JS中的下拉菜单非常简单。

您可以将JS本机地图功能与数组一起使用,以轻松呈现如下菜单。

<强> JSON /对象:

private void fixImage(String filepath) throws IOException {
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inPreferredConfig = Bitmap.Config.ARGB_8888;
    Bitmap b = BitmapFactory.decodeFile(filepath, options);

    ExifInterface ei = new ExifInterface(filepath);
    int orientation = ei.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
    float angle = 0;
    switch(orientation) {
        case ExifInterface.ORIENTATION_ROTATE_90:
            angle = 90;
            break;
        case ExifInterface.ORIENTATION_ROTATE_180:
            angle = 180;
            break;
        case ExifInterface.ORIENTATION_ROTATE_270:
            angle = 270;
            break;
        default:
            angle = 0;
    }
    saveImageToFile(rotateImage(b, angle), filepath);

}

public static Bitmap rotateImage(Bitmap source, float angle)
{
    Matrix matrix = new Matrix();
    matrix.postRotate(angle);
    return Bitmap.createBitmap(source, 0, 0, source.getWidth(), source.getHeight(), matrix, true);
}

HTML:

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

JS:

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

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

希望有所帮助!