PHP：兩個 <select> ，第一個已經准備好填充，第二個我想填充值

Question

我有這個問題：

<fieldset>
<?php
    echo form_open('rssFeedReader/addSource');

    echo '<h2><small>(*) Select in which category you want to add a new Rss Source </small><h2>';

    echo '<div class="form-group">';
        echo '<select class="form-control input-lg" name="category" id="category">';
        foreach( $categories as $row )
        {
            // here i have some values from my database
            echo '<option value="'.$row->id.'">' . $row->category_name . '</option>';
        }
        echo '</select>';
    echo '</div>';

   // NOW, HERE I WANT TO PUT ANOTHER <SELECT>
        echo '<div class="form-group">';
        echo '<select class="form-control input-lg" name="anotherID" id="anotherID">';
        foreach( $array as $r)
        {
            // here i have some values from my database
            echo '<option value="'.$r->something.'">' . $r->something_else. '</option>';
        }
        echo '</select>';
        echo '</div>';



    echo '<div class="form-group">';
        echo form_submit(array('class' => 'btn btn-primary btn-lg btn-block', 'id' => 'remove_source', 'name' => 'remove_source', 'value' => 'Remove Source'));
    echo '</div>';
?>

<?php echo validation_errors('<p class="error">'); ?>

現在，我想做什么。 第二個選擇列表最初是空的。 我想根據第一選擇列表中選擇的值來填充它。

我怎樣才能做到這一點？ 僅當在第一選擇列表中選擇了某些內容時才填充第二選擇列表。

Answer 1

MrCode為您提供了一個很好的例子。

使用Ajax填充選擇框

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#category').on('change', function (){
            $.getJSON('select.php', function(data){
            var options = '';
            for (var x = 0; x < data.length; x++) {
                options += '<option value="' + data[x]['id'] + '">' + data[x]['name'] + '</option>';
            }
            $('#anotherID').html(options);
        });
    });
});
</script>

您的select.php應該使用json_encode（）數據來填充您的選擇

Answer 2

最好的方法是在第一個列表上進行更改后填充列表。 例如。

$("#category").on("change", function(){
    var selectedValue = $(this).val();
    $.get("some.php?value=" + selectedValue, function(response){
        var options = "";
        for(var i = 0; i < response.length;i++){
            var val = response[i];
            options += "<option value='" + response[i].id + "'>" + response[i].name + "</option>";
        }
        $("#anotherID").empty().append(options);

    });
}

我不得不做幾個假設。 例如，您的some.php將采用值參數。 返回的是json數組[{id：1，name：“ option 1”}，{id：2，name：“ option 2”}]。 請記住這一點。