load list of values to the listbox based on another listbox value

Question

load different list of values(from a database) to listbox when changing another listbox value for ex: First list box : -select grade-

Second List box : -select Subject-

Please Help Thank You

Answer 1

The basic idea is to submit that data to the server (either by POST back, or AJAX), and then respond with the data.

<select id="mySel" onChange="sendData()">

What I've done there is added a javascript function to be called every time the drop down value has changed.

function sendData() {
    $.post("processData.php", {selected: $(this).val()}, updateData(data));
}

This is a skeleton of the function I'd write for the select onChange event. I've skipped a step or two here and used jQuery to help create an AJAX request back to the server. I will be calling my php script processData.php to help process which element was selected. The {} contain the data I want to send to the server, in this case the selected value. And Finally what to do once I get data back from the server.

Now I'd be in my php file and able to process the data I took in and run my query to get the new data. Once done I simply json_encode the data and respond with it.

Now back in the javascript world my UpdateData function is automatically called and passed the json data.

function updateData(data) {
    var select = '<select name="sel2">';
    $().each(data, function(index, val){
        select += '<option name="'+ index+ '">'+ value+ '</option>';
    });
    $("#mySel").parent.append(select);
}

That would allow me to generate a new select list from the returned data (assuming a key/value paired array in json).

I haven't actually tested any code and it's designed to be more of a guide and pseudo-code.

Answer 2

当用户从一个选择元素中选择一个值时，发送XMLHttpRequest以获取填充第二个选择元素的数据。