Динамическое добавление текстового поля с использованием jQuery

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

    } 

}); 

Здесь находятся уроки для Вас:

1. Не ставить запятую между атрибутами: type = "text", id=
2. Будьте осторожны о закрытии цитаты: id='row_position></div>
3. Не используйте append, если вы хотите добавить новый элемент управления рядом с другим элементом управления: $("#position").append(row);, вместо этого используйте .after()

Answer 2

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

Вы пропустили закрывающую одинарную кавычку для id, который, вероятно, разорвать все. Попробуйте заменить это на

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