选择选项以基于mysql填充的下拉菜单更新第二个选择选项

Question

I am trying to create a smart form which will automatically limit the options available of a second drop down box.

Background: I am creating a ticketing system and I would like for the user to select a site from the "Site Selection" drop down and then the "User Selection" drop down will only contain users linked to the site selected on the first drop down, all information populated from MySQL.

Future: I would then like to list all the services associated to that user with tick boxes under "Select Affected Services"

My js is pretty poor. So far I have been able to find some code by searching here that has allowed me to write the User's Computer ID into a text field. But I cannot figure out how to capture the output and query for the Computer Name (different table) and display that as a tick box option or to use the same method to limit the next lot of selection boxes. All code listed below I have not cleansed yet, alpha phase.

I realise that I could do this in steps using PHP only, but I am trying to pretty up my coding here and there.

Displaying Drop Downs:

    <h3>Assign Site</h3> 

    <select id="site_add" name="site_add" style="width:217px; height:20px !important;">
        <option value="-1"></option>';

  $o = "SELECT * FROM company_sites WHERE company_id = " . $company_id . " ORDER BY sitename";
$rs = mysql_query($o);
$nr = mysql_num_rows($rs);
for ($i=0; $i<$nr; $i++) {
$r = mysql_fetch_array($rs);
        echo '<option value="' . $r['id'] . '">' . $r['sitename'] . '</option>';
    }

    <h3>Assign User</h3> 
    <select id="comp_add" name="comp_add_1" style="width:217px; height:20px !important;">
        <option value=""></option>';

  $o = "SELECT * FROM company_staff WHERE company_id = " . $company_id . " ORDER BY id DESC";
$rs = mysql_query($o);
$nr = mysql_num_rows($rs);
for ($i=0; $i<$nr; $i++) {
$r = mysql_fetch_array($rs);

    $user_computer_id = $r['computer_id'];

        echo '<option value="' . $r['id'] . '">' . $r['firstname'] . ' ' . $r['lastname'] . '</option>';
    }

Current JS to output selected user's computer ID into text field:

<script type="text/javascript"> 
window.onload=function() { attachBehaviors(); }; 
// 
function attachBehaviors() { 
 document.getElementById(\'person\').onchange=function() { 
 loadUser(this.options[this.selectedIndex].value); // <-- check this, may be incorrect 
 } 
} 
function loadUser(optionvalue) { 
 // Always set a default 
 if (optionvalue==\'\') {  
 return; 
 }
 opts = optionvalue.split(\':\'); 
 var name = opts[0]; 
 var email = opts[1]; 
 document.getElementById(\'computer_id\').value=name; 
} 

</script> 

<select name="person" id="person"> 
    <option value=""></option>';


$result=mysql_query("SELECT * FROM company_staff"); 
while($row=mysql_fetch_array($result)) { 

$submit_firstname = $row['firstname']; 
$submit_lastname = $row['lastname']; 
$submit_staff_id = $row['id']; 
$submit_computer_id = $row['computer_id']; 


 echo '<option value="' . $submit_staff_id . '">' . $submit_firstname . ' ' . $submit_lastname . '</option>\n'; 
} 
echo '
</select> 
<input type="text" id="computer_id" name="name" placeholder="name" /> 
';

Any recommendations on how to achieve this would be greatly appreciated!

Thanks in advance!

Answer 1

You need AJAX, it's a combination of PHP and JS. ( javascript request data from the server, php processes the request, returns data ).

You would need to practice AJAX a bit to understand how to make this select box.

This is process in theory:

1. You output your first select box with PHP.

2. Make an onchange event handler for it that would call a server for information.

   ..options..

3. This updateNewDropDown function will take the value form a server response you selected and fetch the new data via PHP for the second select menu, and create the new select menu with the data AJAX response provided.

AJAX TUTORIALS:

http://api.jquery.com/jQuery.ajax/ http://www.w3schools.com/ajax/default.asp