PHP如何在Javascript中使用Foreach循环

Question

I want a teacher to select multiple classes when he click a button, the classes are selected from the database and displayed via an tag. I have made a function which makes a new select and displays another list of the classes, however my foreach loop doesn't seem to work...

Here's my JQuery which is inside a 'script' tag in the HTML:

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><select name="klas" style="width:40%;"><?php foreach ($klas as $klas) {echo "<option  value='".$klas->getCode()."'>".$klas->getCode()."</option>"; } ?></select><a href="#" class="remove_field">Verwijder</a></div>'); //add input box
        }
    });

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

This is the button and the corresponding div's:

<div class="input_fields_wrap">
    <button type="button" class="add_field_button">Add More Fields</button>
    <div>
<select name="klas">
<?php foreach ($klas as $klas) {
echo "<option  value='".$klas->getCode()."'>".$klas->getCode()."</option>"; } ?>
</select>
    </div>
</div>

Does someone have any idea how I can achieve the same result from JQuery as from the regular php/html select box?

Answer 1

put your array in arr format in this answer and append to the div wherever you want on page currently i use select_div

<div class="input_fields_wrap">
        <button type="button" class="add_field_button">Add More Fields</button>
        <div id ="select_div">
        </div>
    </div>
    <script type="text/javascript">
    var arr = [
      {val : 1, text: 'One'},
      {val : 2, text: 'Two'},
      {val : 3, text: 'Three'}
    ];

    var sel = $('<select>').appendTo('#select_div');

    $(arr).each(function() {
     sel.append($("<option>").attr('value',this.val).text(this.text));
    });
    sel.append("</select>")
    </script>

Answer 2

Found it. Your problem is that you use the same value name for both $klas array as well as internal foreach variable. While this is not technically incorrect, notice that after foreach $klas variable will be equal to last element of the array - not the array itself .

Since you were using this loop inside javascript it was tough to spot, and local test with foreach showed that everything is fine.

Anyway please update your code (everywhere were it is used) from:

<?php 
    foreach ($klas as $klas) { 
        $klas->getCode()
    }
?>

to

<?php 
    foreach ($klas as $k) {
        $k->getCode();
    }
 ?>