jquery不會將字段的選擇選項附加到另一個字段

Question

我在laravel項目上工作我有一個窗體，當您單擊添加按鈕時顯示引導模式，我想將課程字段的選擇選項加載到使用jquery選擇級別模式（顯示您何時單擊添加按鈕），但它始終不顯示任何內容。
場和水平表單代碼

<div class="col-sm-4"> 
<label for="program">Course</label> 
<div class="input-group"> 
<select class="form-control" name="program_id" id="program_id"> 
<option value="">------------</option> 
@foreach($programs as $key =>$p) 
<option value="{{$p->program_id}}">{{$p->program}}</option> 
@endforeach 
</select> 
<div class="input-group-addon"> 
<span class="fa fa-plus" id="add-more-program"></span> 
</div> 
</div> 
</div> 
<div class="col-sm-5"> 
<label for="level">Level</label> 
<div class="input-group"> 
<select class="form-control" name="level_id" id="level_id"> 
</select> 
<div class="input-group-addon"> 
<span class="fa fa-plus" id="add-more-level"></span> 
</div> 
</div> 
</div> 

腳本代碼的水平模態代碼

<div class="modal fade" id="level-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">New level</h4> 
     </div> 
     <form action="{{route('postInsertLevel')}}" method="post" id="frm-level-create"> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <select class="form-control" name="program_id" id="program" placeholder="program_id"></select> 
       </div> 
      </div> 

$('#add-more-level').on('click', function(){ 
     var programs = $('#program_id option'); 
     var program = $('#frm-level-create').find('#program_id'); 
     $(program).empty(); 
     console.log(program); 
     $.each(programs, function(i,pro){ 
      $(program).append($("<option/>",{ 
       value : $(pro).val(), 
       text : $(pro).text(), 
      })) 
     }) 
     $('#level-show').modal('show'); 
    }); 

部分是不是有什麼錯我的代碼？

Answer 1

你的問題是在這條線：

var program = $('#frm-level-create').find('#program_id'); 

將其更改爲：

var program = $('#frm-level-create').find('#program'); 

此外，爲標籤的屬性是錯誤的。我改變了他們，像：

<label for="program">Course</label> 

到：

<label for="program_id">Course</label> 

的片段：

$('#add-more-level').on('click', function(){ 
 
    var programs = $('#program_id option'); 
 
    var program = $('#frm-level-create').find('#program'); 
 
    $(program).empty(); 
 
    //console.log(program); 
 
    $.each(programs, function(i,pro){ 
 
     $(program).append($("<option/>",{ 
 
      value : $(pro).val(), 
 
      text : $(pro).text(), 
 
     })) 
 
    }) 
 
    $('#level-show').modal('show'); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="col-sm-4"> 
 
    <label for="program_id">Course</label> 
 

 
    <div class="input-group"> 
 
     <select class="form-control" name="program_id" id="program_id"> 
 
      <option value="">------------</option> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
     </select> 
 

 
     <div class="input-group-addon"> 
 
      <span class="fa fa-plus" id="add-more-program"></span> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="col-sm-5"> 
 
    <label for="level_id">Level</label> 
 

 
    <div class="input-group"> 
 
     <select class="form-control" name="level_id" id="level_id"> 
 
     </select> 
 

 
     <div class="input-group-addon"> 
 
      <span class="fa fa-plus" id="add-more-level">add-more-level</span> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 

 
<div class="modal fade" id="level-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
       <h4 class="modal-title">New level</h4> 
 
      </div> 
 
      <form action="{{route('postInsertLevel')}}" method="post" id="frm-level-create"> 
 
       <div class="modal-body"> 
 
        <div class="row"> 
 
         <div class="col-sm-12"> 
 
          <select class="form-control" name="program_id" id="program" 
 
            placeholder="program_id"></select> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>