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> 

スクリプトコード

$('#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'); 
    }); 

レベルモーダルコード

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

の一部は、私のコードに何か問題はありますか？

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>