选择选项来更新基于mysql填充下拉菜单的第二个选择选项 [英] select option to update second select option based on mysql populated dropdowns
问题描述
背景:
我正在创建一个智能表单,它会自动限制第二个下拉框中的选项。票务系统,我希望用户从站点选择下拉列表中选择一个站点,然后用户选择下拉菜单中将只包含链接到第一个下拉列表中选定站点的用户,所有信息从MySQL填充。
未来:
然后我想用选择受影响的服务下的勾选框列出与该用户关联的所有服务。
我的js很差。到目前为止,通过在这里搜索,我已经能够找到一些代码,允许我将用户的计算机ID写入文本字段。但我不知道如何捕获计算机名称(不同表格)的输出和查询,并将其显示为勾选框选项或使用相同的方法限制下一批选择框。下面列出的所有代码我还没有清理,alpha阶段。
我意识到我可以在使用PHP的步骤中做到这一点,但我试图让我的编码
显示跌幅:
< h3> ;分配网站< / h3>
< select id =site_addname =site_addstyle =width:217px; height:20px!important;>
< option value = - 1>< / option>';
$ o =选择*从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']。 < /选项>;
}
< h3>分配用户< / h3>
< 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']。 < /选项>;
当前JS将所选用户的计算机ID输出到文本字段中:
< script type =text / javascript>
window.onload = function(){attachBehaviors(); };
//
函数attachBehaviors(){
document.getElementById(\'person\')。onchange = function(){
loadUser(this.options [this。的selectedIndex]。价值); // < - 检查这个,可能不正确
}
函数loadUser(optionvalue){
//总是设置一个默认
if(optionvalue = = \'\'){
return;
}
opts = optionvalue.split(\':\');
var name = opts [0];
var email = opts [1];
document.getElementById(\'computer_id \')。value = name;
}
< / script>
< select name =personid =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。 < /选项> \\\
;
}
echo'
< / select>
< input type =textid =computer_idname =nameplaceholder =name/>
';
任何有关如何达到此目的的建议都将不胜感激!
预先感谢!
您需要AJAX,它是PHP和JS的组合。 (来自服务器的javascript请求数据,php处理请求,返回数据)。
您需要练习AJAX以了解如何制作此选择框。 / p>
这是理论上的过程:
- 用PHP输出第一个选择框。
-
为它创建一个onchange事件处理程序,它将调用服务器以获取信息。
.. options ..
-
这个updateNewDropDown函数将采取服务器响应的值通过PHP为第二个选择菜单选择并获取新数据,并使用提供的数据AJAX响应创建新的选择菜单。
AJAX教程:
http ://api.jquery.com/jQuery.ajax/
http ://www.w3schools.com/ajax/default.asp
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!
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:
- You output your first select box with PHP.
Make an onchange event handler for it that would call a server for information.
..options..
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
这篇关于选择选项来更新基于mysql填充下拉菜单的第二个选择选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!