每个

Question

Hello其他程序员精英！

目前我正在开发一个脚本，它允许用户添加相同“种类/类型”的多个选择字段。这些选择字段中的每一个都有一个函数，根据您使用ajax加载的选项为您提供特殊的选择选项。问题是，我已经为第一个（和“静态”）选择字段设置了所有内容。我已经尝试过类的逻辑方法等等。但它们似乎都不适合我。

我想补充一点，我在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 -->

JSFiddle - Dynamic Add with dependant select option each