Question

我正在研究一个涉及将表单转换为HTML的学校项目。有一次下降，询问您是否申请成为TA或PLA。选中后，我希望在下拉列表下方显示一个新文本框。这就是我所拥有的：

这是我的控制器中的下拉数据：

$data['selection'] = array("TA (Graduate Student)", "PLA (Undergraduate)");

以下是视图中的内容：

<label for="studentSelection">What position are you applying for?
<?php echo Form::select(array( 'name'=> 'position', 'id' => 'position', 'class' => 'form-control', 'data' => $data['selection']));?>
</label>

这就是我的尝试：

$("#position").change(function() {
//one selection is 1, the other is 0.
if ($("#position").val() == 1){  
    var row = $("<div class='row' id='row_position></div>");
    var year = $('<div class = "col-md-6"></div>');
    var position = $('<input type = "text", id="position1", name="position1" class="form-control"></input>');

    $("#position").append(row);
    row.append(year);
    year.append(position);


    //alert works when PLA is selected.
    //alert("hello");
}
else {
    //something else
}

我无法弄清楚

Answer 1

我尝试修复代码中的错误：https://jsfiddle.net/840xyrL7/1/

<select id='position'>
   <option value="1">Item1</option>
   <option value="2">Item2</option>
</select>


$("#position").change(function() {
  //one selection is 1, the other is 0.
  if(this.selectedIndex === 1){
      var row = $("<div class='row' id='row" + this.selectedIndex + "'></div>");
      var year = $('<div class = "col-md-6"></div>');
      var position = $('<input placeholder="Your text" type="text" id="position' + this.selectedIndex + '"  name="position' + this.selectedIndex + '" class="form-control"></input>');
      year.append(position); 
      row.append(year);

      $("#position").after(row);

   }

});

以下是为您学到的经验教训：

不要在属性之间加逗号：type = "text", id=
小心关闭引号：id='row_position></div>
如果您想在另一个控件旁边添加新控件，请不要使用追加：$("#position").append(row);，而是使用.after()

Answer 2

<div class='row' id='row_position></div>

您错过了id的结束单引号，这可能会破坏所有内容。尝试用

替换它

<div class='row' id='row_position'></div>

使用jQuery动态添加文本框

2 个答案: