js更改下拉列表

Question

前3个下拉列表正在运行。如果单击“添加讲座”按钮，则会再添加3个下拉列表。我想通过添加讲座按钮创建相同的下拉菜单，但课程列表不会出现在其他下拉列表中。如果主题是cs，则课程下拉列表应显示307和306，或者如果主题是ie，课程下拉列表应显示208,301。成绩下拉总是相同，并且它在任何地方都有效。

https://codepen.io/anon/pen/JOXMJb?editors=1010

HTML

<div class="multi-field-wrapper">
      <button type="button" class="add-field">Add Lecture</button>        
      <div class="multi-fields">
        <div class="multi-field">

            <select class="text-two" name="attraction_or_activity[]">
                <option value="attraction_or_activity">subject</option>
                <option value="cs">CS</option>
      <option value="ie">IE</option>
                <option value="math">MATH</option>
            </select>
            <!--input id="attr_acti_btn" type="button" value="Click to Show!" /-->

            <select id="populated_attr_or_activity" name="attraction_or_activity_selected[]">
                <!-- here I ahve to populate the ARRAYS as option -->
                <option value="available_attr_act">course</option>
            </select>

    <select class="text-one" name="destination[]">
                <option selected value="base">grade</option>
                <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="f">F</option>
            </select>

        </div>
            <br/>
            <!--div id="myDiv"></div>
            <div id="attr_or_act_div"></div>

          <!--a href="#" class="remove_field">Remove</a-->

    </div>

JS

$(document).ready(function() {

$(".text-two").change(function() { // when the attraction_OR_activity dropdown is selected
$('#populated_attr_or_activity').html(''); // emptying the selections of 3rd dropdown list if there was any selections were made before.

    /* saving selected values in variables */
    var selected_destination = $('.text-one :selected').val();
    var selected_attraction_or_activity = $('.text-two :selected').val();

    colombo_attractions = new Array("307","306");
    colombo_activities = new Array("208","301");
        colombo_act = new Array("203","306");

    if ( selected_attraction_or_activity == 'cs') {
        colombo_attractions.forEach(function(t) { 
            $('#populated_attr_or_activity').append('<option>'+t+'</option>');
        });
    }

    if ( selected_attraction_or_activity == 'ie') {
        colombo_activities.forEach(function(t) { 
            $('#populated_attr_or_activity').append('<option>'+t+'</option>');
        });
    }

if ( selected_attraction_or_activity == 'math') {
        colombo_activities.forEach(function(t) { 
            $('#populated_attr_or_activity').append('<option>'+t+'</option>');
        });
    }


});

/* ADD DESTINATION */
$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    var x = 1;
    $(".add-field", $(this)).click(function(e) {
        x++;
            $($wrapper).append('<div class="multi-field"><select class="text-two'+x+'" name="attraction_or_activity[]"><option selected value="attraction_or_activity">subject</option><option value="cs">CS</option><option value="ie">IE</option><option value="math">MATH</option></select><select id="populated_attr_or_activity'+x+'"name="attraction_or_activity_selected[]"><option value="available_attr_act">course</option></select><select id="populated_attr_or_activity'+x+'" name="attraction_or_activity_selected[]"><option value="available_attr_act">grade</option><option value="a">A</option><option value="b">B</option><option value="c">C</option><option value="d">D</option><option value="f">F</option></select><a href="#" class="remove_field">Remove</a></div>');
    });

    $($wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});});

Answer 1

检查这是否对您有所帮助：

function ProcessData(subject) {
        var course =  $(subject).parent().find("[name='attraction_or_activity_selected[]']")
        var grade = $(subject).parent().find("[name='destination[]']")
        
        $(course).val('');
        var selected_grade = $(grade).val();
        var selected_subject =  $(subject).val();
        /* saving selected values in variables */
        //var selected_destination = $('.text-one :selected').val();
        //var selected_attraction_or_activity = $('.text-two :selected').val();

        colombo_attractions = new Array("307", "306");
        colombo_activities = new Array("208", "301");
        colombo_act = new Array("203", "306");
        
        $(course).find('option').not(':first').remove();
        if (selected_subject == 'cs') {
            colombo_attractions.forEach(function (t) {
                $(course).append('<option>' + t + '</option>');
            });
        }

        if (selected_subject == 'ie') {
            colombo_activities.forEach(function (t) {
                $(course).append('<option>' + t + '</option>');
            });
        }

        if (selected_subject == 'math') {
            colombo_activities.forEach(function (t) {
                $(course).append('<option>' + t + '</option>');
            });
        }
    }

    $(document).ready(function () {
        $(".text-two").change(function () { // when the attraction_OR_activity dropdown is selected
            ProcessData($(this));
        });
    });
    $(document).ready(function () {

        /* ADD DESTINATION */
        $('.multi-field-wrapper').each(function () {
            var $wrapper = $('.multi-fields', this);
            var x = 1;
            $(".add-field", $(this)).click(function (e) {
                x++;
                $($wrapper).append('<div class="multi-field"><select class="text-two' + x + '" name="attraction_or_activity[]"><option selected value="attraction_or_activity">subject</option><option value="cs">CS</option><option value="ie">IE</option><option value="math">MATH</option></select><select id="populated_attr_or_activity' + x + '"name="attraction_or_activity_selected[]"><option value="available_attr_act">course</option></select><select name="destination[]"><option value="available_attr_act">grade</option><option value="a">A</option><option value="b">B</option><option value="c">C</option><option value="d">D</option><option value="f">F</option></select><a href="#" class="remove_field">Remove</a></div>');
                $($wrapper).on("change", ".text-two" + x, function (e) { //user click on remove text
                    e.preventDefault();
                    ProcessData($(this));
                })
            });

            $($wrapper).on("click", ".remove_field", function (e) { //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            })
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multi-field-wrapper">
    <button type="button" class="add-field">Add Lecture</button>
    <div class="multi-fields">
        <div class="multi-field">

            <select class="text-two" name="attraction_or_activity[]">
                <option value="attraction_or_activity">subject</option>
                <option value="cs">CS</option>
                <option value="ie">IE</option>
                <option value="math">MATH</option>
            </select>
            <!--input id="attr_acti_btn" type="button" value="Click to Show!" /-->

            <select id="populated_attr_or_activity" name="attraction_or_activity_selected[]">
                <!-- here I ahve to populate the ARRAYS as option -->
                <option value="available_attr_act">course</option>
            </select>

            <select class="text-one" name="destination[]">
                <option selected=selected value="base">grade</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
                <option value="d">D</option>
                <option value="f">F</option>
            </select>

        </div>
        <br />
        <!--div id="myDiv"></div>
          <div id="attr_or_act_div"></div>

        <!--a href="#" class="remove_field">Remove</a-->

    </div>
</div>