Change textboxes from dropdown value

2023-02-16 16:22 问答作者：

Would it be possible to add text to textboxes with the click of button?

The page contains three dropdowns (category, sub category, items). First, user selects a category in the dropdown. In the second dropdown, all items that are held in that category are displayed. In the third dropdown, all items that are held in the sub category are displayed. Example: Service Delivery – Help desk – HELP1

User should be able to select an item from the last dropdown box, press a button and all attributes (background, qualifications, professional skills) for that item should be displayed in textboxes underneath.

I was able to create connected dropdowns using JavaScript. Items in the last dropdown are also held under attribute ‘role_id’ in the ‘role table.

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)
)

I’m using MySQL for the database, PHP for script manipulation and JavaScript for the dropdowns. Looking at examples on the Web, Ajax seems to be most appropriate solution. Based on 'role_id', attributes of the item would need to add to empty text boxes.

Here is the code I’ve done so far. Any examples or advice is greatly appreciated.

Many thanks.

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 Arr开发者_开发问答ay('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();
});

You need to load the relevant data for dropdown #2 for the selected item from dropdown #1 from your server dynamically. Search your favorite search engine for "jquery loadJSON" or "php ajax" in general.

In this answer I use the Autocomplete.

First of all I think you should get data for the first dropdownlist here in the code.

//autocomplete for first dropdownlist

        $.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", "");
                });
            }
        });

And then you create a method like this

function GetDataForDropDown2(value) { //call ajax to get data for dropdown 2 follow value in dropdown 1

$.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", "");
                });
            }
        });

In this Step you must create a method is.

function GetDataForDropDown3(value) {

// you use ajax to get data for dropdown 3

// when user select of change the item in the dropdownlist, you just set new value for some field you need.

//example:

$('#background', '#qualifications', '#professionalskills').val('some value');

}

And in controller you can create a method to get data like this: 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;
    }

Any questions to me if you don't understand my ideas.

继续阅读：php

Change textboxes from dropdown value

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？