從下拉值更改文本框

只需點擊按鈕，就可以將文本添加到文本框？從下拉值更改文本框

該頁面包含三個下拉菜單（類別，子類別，項目）。首先，用戶在下拉列表中選擇一個類別。在第二個下拉菜單中，顯示該類別中的所有項目。在第三個下拉菜單中，顯示子類別中的所有項目。示例：服務交付 - 幫助臺 - 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上的例子，Ajax似乎是最合適的解決方案。基於'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(); 
});

來源

2011-03-14 Igor Novoselov

您需要從下拉菜單＃1從服務器動態加載的相關數據下拉＃2所選項目。一般搜索您最喜愛的搜索引擎「jquery loadJSON」或「php ajax」。

來源

2011-03-25 05:52:25 cweiske

在這個答案我使用自動完成。

首先，我認爲您應該在代碼中獲取第一個下拉列表的數據。

//自動完成對第一個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", ""); 
       }); 
      } 
     });

，然後創建這樣

功能GetDataForDropDown2（值） {// AJAX調用一個方法以獲取下拉2跟隨值數據下拉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", ""); 
       }); 
      } 
     });

在這一步你必須創建一個方法是。

功能GetDataForDropDown3（值） {

//你使用AJAX來獲取數據的下拉3

//當用戶選擇改變在下拉列表的項目，您只需設置一些新的價值你需要的領域。

//示例：

$（ '＃背景'， '#qualifications'， '#professionalskills'）VAL（ '一些值'）;

}

而在控制器可以創建一個方法來獲得這樣的數據：公衆詮釋SearchFactoryCode（出的IEnumerable DataOutput中） { const int的信息搜索結果= 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; 
    }

如果您不瞭解我的想法，對我有任何問題。

來源

2014-07-12 16:45:01 David

從下拉值更改文本框

回答

相關問題