从下拉列值更改文本框

时间：2011-03-14 23:11:11

标签： php mysql ajax

是否可以通过点击按钮将文本添加到文本框？

该页面包含三个下拉列表（类别，子类别，项目）。 首先，用户在下拉列表中选择一个类别。 在第二个下拉列表中，将显示该类别中保留的所有项目。 在第三个下拉列表中，将显示子类别中保留的所有项目。 示例：服务交付 - 帮助台 - HELP1

用户应该可以从最后一个下拉框中选择一个项目，按一个按钮，该项目的所有属性（背景，资格，专业技能）都应显示在下面的文本框中。

我能够使用JavaScript创建连接的下拉列表。最后一个下拉列表中的项目也保存在“角色表”中的属性“role_id”下。 

CREATE TABLE role (
  role_id INTEGER(5) UNSIGNED NOT NULL AUTO_INCREMENT,
  background VARCHAR(5000) NULL,
  tasks VARCHAR(5000) NULL,
  knowledge VARCHAR(5000) NULL,
  training VARCHAR(5000) NULL,
  professional VARCHAR(5000) NULL,
  qualifications VARCHAR(5000) NULL,
  PRIMARY KEY(role_id)
)

我正在使用MySQL作为数据库，使用PHP进行脚本操作，使用JavaScript作为下拉列表。看一下Web上的例子，A​​jax似乎是最合适的解决方案。 基于'role_id'，项目的属性需要添加到空文本框中。

这是我到目前为止所做的代码。 非常感谢任何示例或建议。

非常感谢。

Role.html 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Role details - BCS UPDS Web application</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" type="text/css" href="pagestyle.css" />
<script type="text/javascript" src="role_selection.js"></script>

</head> 


<p>Logged in as Student</p>

<p id="pos_help"><a style="text-decoration: none"href="#">Help</a></p>
<p id="pos_logout"><a style="text-decoration: none" href="#">Log out</a></p>


<h3 id="pos_header">BCS UPDS Web application</h3>


<table border="0" cellpadding="0" cellspacing="0" id="pos_list"><tr><td>
 <ul id="button"> 
    <li><a href="personal.html">Personal details</a></li>
    <li><a href="role.html">Roles</a></li>
    <li><a href="job.html">Job description</a></li>
    <li><a href="#">Career Development Plan (CDP)</a></li>
    <li><a href="#">End Cycle Review</a></li>
    <li><a href="#">Help</a></li>
 </ul>
</td></tr></table>


<div class="box1">
<form action="role.php" method="post" id="role">

<table width="443" border="0">

<tr>
<td style="text-align: left;">Select Function Grouping</td>
<td style="text-align: left;">
<select name="function_grouping" id="function_grouping" onchange="setFunction();">
  <option value="Systems Development and Maintenance">Systems Development and Maintenance</option>
  <option value="Service Delivery">Service Delivery</option>
  <option value="Technical Advice and Consultancy">Technical Consultancy and Advice</option>
  <option value="Quality">Quality</option>
  <option value="Customer Relations">Customer Relations</option>
  <option value="Education and Training">Education and Training</option>
  <option value="Support and Administration">Support and Administration</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">Select Function</td>
<td style="text-align: left;">
<select name="role_level" id="role_level" onchange="setRoleLevel();">
  <option value="">Select Function Grouping</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">Select Role Level</td>
<td style="text-align: left;">
<select name="function2"  id="function2">
  <option value="function">Select Function Grouping</option>
</select>
</td>

</tr>
</table>

<input type="submit" name="Submit" value="Select role" id="selectrole"  /></p>

<br></br>

<fieldset id="fieldset">
<legend id="legend">Background</legend>
<p>
  <label for="background"></label>
  <textarea name="textarea" cols="71" rows="10" id="backgroundtext">
</textarea></p>
</fieldset>
<br></br>


<fieldset id="fieldset">
<legend id="legend">Tasks</legend>
<p>
   <label for="tasks"></label>
   <textarea name="textarea" cols="71" rows="10" id="taskstext">
</textarea></p>
</fieldset>
<br></br>


<fieldset id="fieldset">
<legend id="legend">Knowledge and Skills</legend>
<p>
   <label for="knowledge"></label>
   <textarea name="textarea" cols="71" rows="10" id="knowledgetext">
   </textarea></p>
</fieldset>
 <br>  </br>



<fieldset id="fieldset">
<legend id="legend">Training</legend>
<p>
   <label for="training"></label>
   <textarea name="textarea" cols="71" rows="10" id="trainingtext">
</textarea></p>
</fieldset>
<br></br>



<fieldset id="fieldset">
<legend id="legend">Professional Development Activities</legend>  
<p>
   <label for="professional"></label>
   <textarea name="textarea" cols="71" rows="10" id="professionaltext">
   </textarea></p>
 </fieldset>  
   <br></br>


<fieldset id="fieldset">
<legend id="legend">Qualifications</legend> 
<p>
   <label for="qual"></label>
   <textarea name="textarea" cols="71" rows="10" id="qualtext">

   </textarea></p>
</fieldset>
<br></br>

<p><input type="submit" name="Submit" value="Add role to job description" id="addjobdesc" /></p>

</form>
</div>
</body>
</html>

role_selection.js 

var function1 = new Array();

function1['Systems Development and Maintenance'] = new Array('Applications Support','Business Analysis','Data Analysis','Database Design', 'Documentation/Technical Authoring','Porting/Software Integration','Programming/Software Creation','Safety Engineering','Software Engineering','Systems Design','Systems Integration','Software Testing','Web Site Specialism');
function1['Service Delivery'] = new Array('Computer Operations','Database Administration','Hardware/Software Installation','Help Desk','Installation and Implementation','Network Administration and Support','Network Operations','Service Level Monitoring','User Support'); 
function1['Technical Advice and Consultancy'] = new Array('System Ergonomics Evaluation');
function1['Quality'] = new Array('Quality Standards');
function1['Customer Relations'] = new Array('Marketing','Sales Support'); 
function1['Education and Training'] = new Array('Education and Training Delivery');
function1['Support and Administration'] = new Array('Change Management','Configuration Management','Project Office','Security Administration');



var rolelevel = new Array();

rolelevel['Systems Development and Maintenance'] = new Array();
rolelevel['Systems Development and Maintenance']['Applications Support'] = new Array('ASUP1','ASUP2');
rolelevel['Systems Development and Maintenance']['Business Analysis'] = new Array('ANAL2');
rolelevel['Systems Development and Maintenance']['Data Analysis'] = new Array('DTAN1','DTAN2');
rolelevel['Systems Development and Maintenance']['Database Design'] = new Array('DBDS1','DBDS2');
rolelevel['Systems Development and Maintenance']['Documentation/Technical Authoring'] = new Array('DOCM1','DOCM2');
rolelevel['Systems Development and Maintenance']['Porting/Software Integration'] = new Array('PORT2'); 
rolelevel['Systems Development and Maintenance']['Programming/Software Creation'] = new Array('PROG1','PROG2');
rolelevel['Systems Development and Maintenance']['Safety Engineering'] = new Array('SFEN2');
rolelevel['Systems Development and Maintenance']['Software Engineering'] = new Array('SENG1','SENG2');
rolelevel['Systems Development and Maintenance']['Systems Design'] = new Array('DESN2');
rolelevel['Systems Development and Maintenance']['Systems Integration'] = new Array('SIST1','SIST2');
rolelevel['Systems Development and Maintenance']['Software Testing'] = new Array('TEST1','TEST2');
rolelevel['Systems Development and Maintenance']['Web Site Specialism'] = new Array('WBSP1','WBSP2');

rolelevel['Service Delivery'] = new Array();
rolelevel['Service Delivery']['Computer Operations'] = new Array('COPS0','COPS1');
rolelevel['Service Delivery']['Database Administration'] = new Array('DBDS1','DBDS2');
rolelevel['Service Delivery']['Hardware/Software Installation'] = new Array('HSIN1','HSIN2');
rolelevel['Service Delivery']['Help Desk'] = new Array('HELP0','HELP1','HELP2');
rolelevel['Service Delivery']['Installation and Implementation'] = new Array('INIM1','INIM2');
rolelevel['Service Delivery']['Network Administration and Support'] = new Array('NTAS2');
rolelevel['Service Delivery']['Network Operations'] = new Array('NTOP0','NTOP1','NTOP2');
rolelevel['Service Delivery']['Service Level Monitoring'] = new Array('SLMO2');
rolelevel['Service Delivery']['User Support'] = new Array('USUP1','USUP2');


rolelevel['Technical Advice and Consultancy'] = new Array();
rolelevel['Technical Advice and Consultancy']['System Ergonomics Evaluation'] = new Array('HCEV2');

rolelevel['Quality'] = new Array();
rolelevel['Quality']['Quality Standards'] = new Array('QUST1','QUST2');

rolelevel['Customer Relations'] = new Array();
rolelevel['Customer Relations']['Marketing'] = new Array('MKTG2');
rolelevel['Customer Relations']['Sales Support'] = new Array('SSUP1','SSUP2');

rolelevel['Education and Training'] = new Array();
rolelevel['Education and Training']['Education and Training Delivery'] = new Array('ETDL2');

rolelevel['Support and Administration'] = new Array();
rolelevel['Support and Administration']['Change Management'] = new Array('CHMG2');
rolelevel['Support and Administration']['Configuration Management'] = new Array('CFMG2');
rolelevel['Support and Administration']['Project Office'] = new Array('PROF2');
rolelevel['Support and Administration']['Security Administration'] = new Array('SCAD2');




function setFunction() {
  functiongSel = document.getElementById('function_grouping');
  rolelevelList = function1[functiongSel.value];
  changeSelect('role_level', rolelevelList, rolelevelList);
  setRoleLevel();
}

function setRoleLevel() {
  functiongSel = document.getElementById('function_grouping');
  functionSel = document.getElementById('role_level');
  functionList = rolelevel[functiongSel.value][functionSel.value];
  changeSelect('function2', functionList, functionList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setFunction();
});

2 个答案:

答案 0 :(得分：0)

您需要动态地从服务器的下拉列表＃1为所选项目的下拉列表＃2加载相关数据。一般搜索你最喜欢的搜索引擎“jquery loadJSON”或“php ajax”。

答案 1 :(得分：0)

在这个答案中，我使用了自动完成功能。

首先，我认为你应该获得第一个下拉列表的数据 这里是代码。

//第一个下拉列表的自动完成

        $.ajax({
            url: '../controller/getData',
            type: 'POST',
            success: function (data) {
                var aname = '';
                $("#firstDropdownlistID").twocolumnautocomplete2({
                    source: data,
                    minLength: 0,
                    valueFirst: true,
                    select: function (event, ui) {
                        //Set data to some field.
                        $("#field1").val(ui.item.label);
                        $("#fiedl2").val(ui.item.value);
                        // Fill data for dropdown 2 from selected value in dropdown 1
                        GetDataForDropDown2($("#fiedl2").val(ui.item.value));
                    },
                    change: function (event, ui) {
                        debugger;
                        if (ui.item == null) {
                            $("#field1").val(null);
                            $("#field2").val(null);
                        } else {
                            $("#field1").val(ui.item.label);
                            $("#field2").val(ui.item.value);
                        // Fill data for dropdown 2 from selected value in dropdown 1
                        GetDataForDropDown2($("#fiedl2").val(ui.item.value));
                        }
                    }
                }).focus(function () {
                    $(this).twocolumnautocomplete2("search", "");
                });
            }
        });

然后你创建一个像这样的方法

函数GetDataForDropDown2（value） {     //调用ajax获取下拉列表中的数据2跟随下拉列表中的值

$.ajax({
            url: '../controller/getData',
            type: 'POST',
            success: function (data) {
                var aname = '';
                $("#firstDropdownlistID").twocolumnautocomplete2({
                    source: data,
                    minLength: 0,
                    valueFirst: true,
                    select: function (event, ui) {
                        //Set data to some field.
                        $("#field1").val(ui.item.label);
                        $("#fiedl2").val(ui.item.value);
                        // Fill data for dropdown 2 from selected value in dropdown 1
                        GetDataForDropDown3($("#fiedl2").val(ui.item.value));
                    },
                    change: function (event, ui) {
                        debugger;
                        if (ui.item == null) {
                            $("#field1").val(null);
                            $("#field2").val(null);
                        } else {
                            $("#field1").val(ui.item.label);
                            $("#field2").val(ui.item.value);
                        // Fill data for dropdown 2 from selected value in dropdown 1
                        GetDataForDropDown3($("#fiedl2").val(ui.item.value));
                        }
                    }
                }).focus(function () {
                    $(this).twocolumnautocomplete2("search", "");
                });
            }
        });

在此步骤中，您必须创建一个方法。

函数GetDataForDropDown3（value） {

//使用ajax获取下拉列表3的数据

//当用户选择更改下拉列表中的项目时，您只需为您需要的某个字段设置新值。

//示例：

$（'＃background'，'＃qualifications'，'＃profofionalskills'）。val（'some value'）;

}

在控制器中你可以创建一个方法来获取这样的数据：  public int SearchFactoryCode（out IEnumerable dataoutput）         {             const int searchResult = 0; 

        var factory = CommonData.GetMsFactories();

        var factoryValue = factory.Select(s => new FactorySearchFactoryCode
                                                   {
                                                       ID = s.Id, 
                                                       FactoryCode = s.Code,
                                                       FactoryName = s.Value
                                                   }).ToList();
        dataoutput = factoryValue;
        return searchResult;
    }

如果您不理解我的想法，请向我提出任何问题。

相关问题
最新问题