Javascript 使用基于选择的select选项获取动态添加div

各位程序员精英朋友好

我目前正在编写一个脚本，它将与我的其他脚本相结合

• 第一个允许用户添加多个div，其中包含一组select字段。主选项从数据库获取select选项，而下面的其他5个选项将被禁用，直到您选择和
• 然后，另一个将根据您所做的选择获取选择选项，并一次启用一个（总是在下一个选择之后；请参见fiddle）

ATM我成功地编写了一个“静态”版本，这意味着只有第一组select字段可以工作（fetch、enable等），但是脚本附加的字段不能工作

也许我的想法太复杂了，但我已经尝试过类和ID。他们似乎都不为我工作

我想补充一点，我在javascript/jQuery方面的知识没有那么丰富，所以我需要帮助。在下面，你可以找到代码和我当前进度的现成资料

请注意，获取的脚本只是传递$\u POST并查询要在my db中搜索的值。此脚本不会添加到小提琴中。如果需要，我会添加它，但就我所想，这只是一个Javascript/jQuery问题

我感谢每一个提示和帮助

<!-- HTML / PHP -->
<div class="mz_input_fields_wrap">
    <a href="#" class="mz_add_field_button">
        <table width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 0;">
            <tr>
                <th align="left">Add exam</th>
                <th align="right"><font color="#FFD700">[+]</font></th>
            </tr>
            <tr>
                <th colspan="2"><hr /></th>
            </tr>
        </table>
    </a>
<div>
<table id="addmz" width="385px" cellspacing="5px" style="border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;">
    <tr>
        <td align="left">Exam<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;" required="required"  >
                <?
                    $select_option  = "SELECT * FROM _main_wptable WHERE `event_id` = '".$event_id."' ORDER BY rd_id ASC";
                    $result_option  = mysqli_query($mysqli, $select_option);
                    $anzahl_option  = mysqli_num_rows($result_option);

                    if($anzahl_option > 0) {
                        echo "<option value=''>Choose exam</option>";
                    while($row = mysqli_fetch_assoc($result_option)) {
                        echo "<option value='".$row["rd_id"]."'>".$row["rd_type"].$row["rd_id"]."</option>";
                    }
                    } elseif($anzahl_option == 0) {
                        echo "<option value=''>No exams available</option>";
                    }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left">1. Position<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id_pos_1" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
                <option value=" " selected="selected">Choose exam first</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left">2. Position<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id_pos_2" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
                <option value=" " selected="selected">Choose exam first</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left">3. Position<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id_pos_3" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
                <option value=" " selected="selected">Choose exam first</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left">4. Position<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id_pos_4" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
                <option value=" " selected="selected">Choose exam first</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="left">5. Position<font color="#8E6516">*</font></td>
        <td align="right">
            <select name="mz_id[]" class="rd_id_pos_5" placeholder="Bitte auswählen" style="background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;">
                <option value=" " selected="selected">Choose exam first</option>
            </select>
        </td>
    </tr>
</table>
<!-- END OF HTML / PHP -->

<!-- JS / JQUERY -->
$(document).ready(function() {
    //  DEPENDENT SELECT OPTIONS
    $('.rd_id').on('change',function(){
        var rd_idID = $(this).val();
        if(rd_idID){
            $.ajax({
                type: 'POST',
                url: 'ajaxProcessing.php',
                data: 'rd_id='+rd_idID,
                success: function(html){
                    $('.rd_id_pos_1').html(html);
                    $('.rd_id_pos_2').html('<option value="">Choose 1. Pos. </option>');
                    $('.rd_id_pos_3').html('<option value="">Choose 1. Pos. </option>');
                    $('.rd_id_pos_4').html('<option value="">Choose 1. Pos. </option>');
                    $('.rd_id_pos_5').html('<option value="">Choose 1. Pos. </option>');
                }
            }); 
        }else{
            $('.rd_id_pos_1').html('<option value="">Choose exam</option>');
            $('.rd_id_pos_2').html('<option value="">Choose exam</option>'); 
            $('.rd_id_pos_3').html('<option value="">Choose exam</option>');
            $('.rd_id_pos_4').html('<option value="">Choose exam</option>');
            $('.rd_id_pos_5').html('<option value="">Choose exam</option>');
        }
    });

    $('.rd_id_pos_1').on('change',function(){
        var rd_idID = $('.rd_id').val();
        var rd_id_pos_1ID = $(this).val();
        if(rd_id_pos_1ID){
            $.ajax({
                type: 'POST',
                url: 'ajaxProcessor.php',
                data: 'rd_id='+rd_idID,
                success: function(html){
                    $('.rd_id_pos_2').html(html);
                    $('.rd_id_pos_3').html('<option value="">Choose 2. Pos.</option>');
                    $('.rd_id_pos_4').html('<option value="">Choose 2. Pos.</option>');
                    $('.rd_id_pos_5').html('<option value="">Choose 2. Pos.</option>'); 
                }
            }); 
        }else{
            $('.rd_id_pos_2').html('<option value="">Choose 1. Pos.</option>'); 
            $('.rd_id_pos_3').html('<option value="">Choose 1. Pos.</option>');
            $('.rd_id_pos_4').html('<option value="">Choose 1. Pos.</option>');
            $('.rd_id_pos_5').html('<option value="">Choose 1. Pos.</option>'); 
        }
    });

    $('.rd_id_pos_2').on('change',function(){
        var rd_idID = $('.rd_id').val();
        var rd_id_pos_2ID = $(this).val();
        if(rd_id_pos_2ID){
            $.ajax({
                type: 'POST',
                url: 'ajaxProcessor.php',
                data: 'rd_id='+rd_idID,
                success: function(html){
                    $('.rd_id_pos_3').html(html);
                    $('.rd_id_pos_4').html('<option value="">Choose 3. Pos.</option>');
                    $('.rd_id_pos_5').html('<option value="">Choose 3. Pos.</option>');
                }
            }); 
        }else{
            $('.rd_id_pos_3').html('<option value="">Choose 2. Pos.</option>');
            $('.rd_id_pos_4').html('<option value="">Choose 2. Pos.</option>');
            $('.rd_id_pos_5').html('<option value="">Choose 2. Pos.</option>');
        }
    });

    $('.rd_id_pos_3').on('change',function(){
        var rd_idID = $('.rd_id').val();
        var rd_id_pos_3ID = $(this).val();
        if(rd_id_pos_3ID){
            $.ajax({
                type: 'POST',
                url: 'ajaxProcessor.php',
                data: 'rd_id='+rd_idID,
                success: function(html){
                    $('.rd_id_pos_4').html(html);
                    $('.rd_id_pos_5').html('<option value="">Choose 4. Pos.</option>');
                }
            }); 
        }else{
            $('.rd_id_pos_4').html('<option value="">Choose 3. Pos.</option>');
            $('.rd_id_pos_5').html('<option value="">Choose 3. Pos.</option>'); 
        }
    });

    $('.rd_id_pos_4').on('change',function(){
        var rd_idID = $('.rd_id').val();
        var rd_id_pos_4ID = $(this).val();
        if(rd_id_pos_4ID){
            $.ajax({
                type: 'POST',
                url: 'ajaxProcessor.php',
                data: 'rd_id='+rd_idID,
                success: function(html){
                    $('.rd_id_pos_5').html(html);
                }
            }); 
        }else{
            $('.rd_id_pos_5').html('<option value="">Choose 4. Pos.</option>'); 
        }
    });

    //  EXAMS
    //  MAX INPUT ALLOWED
    var mz_max_fields      = 15;

    //  FIELDS WRAPPER
    var mz_wrapper         = $(".mz_input_fields_wrap");

    //  ADD BUTTON ID
    var mz_add_button      = $(".mz_add_field_button");

    //  INITIAL TEXT BOX COUNT
    var mz_x = 1;

    //  ON ADD INPUT BUTTON CLICK
    $(mz_add_button).click(function(e){
        e.preventDefault();

        //  MAX INPUT ALLOWED
        if(mz_x < mz_max_fields){
            //  TEXT BOX INCREMENT
            mz_x++;

            //  ADD INPUT BOX
            $(mz_wrapper).append("<div><table id='addmz' width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><th colspan='2'>&nbsp;</th></tr><tr><th colspan='2'><hr class='white-hr' /></th></tr><tr><th colspan='2'>&nbsp;</th></tr></table><a href='#' class='mz_remove_field'><table id='addmz' width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><th align='left'>Delete Exam</th><th align='right'><font color='#FFD700'>[&ndash;]</font></th></tr></table></a><tr><th colspan='2'><hr /></th></tr></table><table width='385px' cellspacing='5px' style='border-left: 1px solid #FFFFFF; border-top: 0; border-right: 1px solid #FFFFFF; border-bottom: 0;'><tr><td align='left'>Exam<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_" + mz_x +"' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;' required='required'><? if($anzahl_option > 0) { echo "<option value=''>Choose exam</option>"; while($row = mysqli_fetch_assoc($result_option)) { echo "<option value='".$row["rd_id"]."'>".$row["rd_type"].$row["rd_id"].$what."</option>"; } } elseif($anzahl_option == 0) { echo "<option value=''>No exams available</option>"; } ?></select></td></tr><tr><td align='left'>1. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_1' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>2. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_2' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>3. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_3' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>4. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_4' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr><tr><td align='left'>5. Position<font color='#8E6516'>*</font></td><td align='right'><select name='mz_id[]' id='rd_id_pos_" + mz_x + "_5' style='background: transparent; background-color: #FFFFFF; color: #8E6516; width: 135px;'><option value=' ' selected='selected'>Choose exam</option></select></td></tr></tr></table></div>");
        }
    });

    //  USER CLICK TO REMOVE TEXT
    $(mz_wrapper).on("click",".mz_remove_field", function(e){
        e.preventDefault(); $(this).parent('div').remove(); 
        mz_x--;
    });
});
<!-- END OF JS / JQUERY -->

考试*
我自己发现的。如上所述，我希望实现附加内容能够触发AJAX。因此，代替（例如）：

我把它改成：

$(document).on('change', '.rd_id_pos_1', function(){ /* see fiddle for the rest */ } 

因此，我没有选择附加内容的类，而是选择了类所在的文档。很好

提示：不是在小提琴中实现的，所以请自便
 我自己发现的。如上所述，我希望实现附加内容能够触发AJAX。因此，代替（例如）：

我把它改成：

$(document).on('change', '.rd_id_pos_1', function(){ /* see fiddle for the rest */ } 

因此，我没有选择附加内容的类，而是选择了类所在的文档。很好

提示：不是在小提琴中实现的，所以请自便
 我认为问题在于如何将HTML选项添加到选择框中。您是否尝试创建对象并附加它们？因此，不要说ying
$（'.rd\u id\u pos\u 3'）.html（'Choose 2.pos'）尝试使用$（'Choose X.Pos'）。请不要误解我的意思。整个故事照原样进行。我只需要一个解决方案，使它也适用于附加的选择选项。还是我误解了你的意思？不确定，有没有办法把ajax响应放在那把小提琴上？也许像静态数据或其他东西，这样我们可以看到整个画面，以及为什么它不适用于其他人。我不这么认为。我只需要一个可能性，使上述功能（静态版本）也适用于附加的。我认为问题在于在选择框中添加HTML选项。您是否尝试创建对象并附加它们？因此，不要说ying
$（'.rd\u id\u pos\u 3'）.html（'Choose 2.pos'）尝试使用$（'Choose X.Pos'）。请不要误解我的意思。整个故事照原样进行。我只需要一个解决方案，使它也适用于附加的选择选项。还是我误解了你的意思？不确定，有没有办法把ajax响应放在那把小提琴上？也许像静态数据或其他东西，这样我们可以看到整个画面，以及为什么它不适用于其他人。我不这么认为。我只需要一个可能性，使上述功能（静态版本）也适用于附加的。像是在课余时间什么的？