jquery 不会将一个字段的选择选项附加到另一个字段中

Question

我正在开发一个 Laravel 项目，我有一个表单，当您单击添加按钮时显示引导模式，我想将类(class)字段的选择选项加载到级别模式的选择中(当您单击时显示)添加按钮)使用jquery，但它一直没有向我显示任何内容。
类(class)和级别表格代码

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

此外，您标签的 for 属性是错误的。我改变了它们，例如:

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