javascript - 获取选择选项的值然后使用变量输出另一个选择选项

Question

我想获取选择选项的值，然后使用输出另一个选择选项，我正在使用 Laravel 路由来显示输出，我已经从程序中选择数据并将数据添加到level_program_id，它不起作用。我和使用 jQuery 2.3.* 版本。

$('#add-more-level').on('click', function() {

      var programs = $('#program_id option');
      var program = $('#frm-level-create').find('#level_program_id');
      $(program).empty();
      $.each(programs, function(index, item) {
        $(program).append($("<option>", {
          value: $(item).val(),
          text: $(item).text(),
        }));


        $('#level-show').modal('show');
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="col-md-3">
  <label for="programs">Courses</label>
  <div class="input-group">
    <select class="form-control" name="program_id" id="program_id">
      <option value="">Select</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" role="button"></span>
    </div>
  </div>
</div>

<!-- I have linked the second HTML using modal id selector -->

<div class="modal fade" id="level-show" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" area-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Add Level</h4>
      </div>
      <form action="{{ route('postInsertLevel' )}}" method="post" id="frm-level-create"></form>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12">
            <select name="program_id" id="level_program_id" class="form-control"></select>
          </div>
        </div>
        <div class="row" style="margin-top:30px">
          <div class="col-sm-12">
            <input type="text" name="level" id="new-level" class="form-control" placeholder="Enter level">
          </div>
        </div>
        <div class="row" style="margin-top:30px">
          <div class="col-sm-12">
            <input type="text" name="description" id="level-description" class="form-control" placeholder="Enter Description">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary ">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

标签： javascriptphpjquerylaravel