Изменить текстовые поля из выпадающего значения - PullRequest
Новая
       1

Изменить текстовые поля из выпадающего значения

0 голосов
/ 15 марта 2011

Можно ли добавить текст в текстовые поля нажатием кнопки?

Страница содержит три раскрывающихся списка (категория, подкатегория, элементы). Сначала пользователь выбирает категорию в раскрывающемся списке. Во втором раскрывающемся списке отображаются все элементы этой категории. В третьем раскрывающемся списке отображаются все элементы, которые содержатся в подкатегории. Пример: Служба доставки - Справочная служба - HELP1

Пользователь должен иметь возможность выбрать элемент из последнего выпадающего списка, нажать кнопку, и все атрибуты (фон, квалификации, профессиональные навыки) для этого элемента должны отображаться в текстовых полях под ним.

Мне удалось создать связанные выпадающие списки с помощью JavaScript. Элементы в последнем раскрывающемся списке также содержатся под атрибутом «role_id» в таблице «role». 

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 для выпадающих списков. Глядя на примеры в Интернете, 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();
});

Ответы [ 2 ]

0 голосов
/ 12 июля 2014

В этом ответе я использую автозаполнение.

Прежде всего, я думаю, что вы должны получить данные для первого выпадающего списка здесь в коде.

// автозаполнение для первого выпадающего списка 

        $.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

// когда пользователь выбирает изменить элемент в выпадающем списке, вы просто устанавливаете новое значение для какого-либо поля, которое вам нужно.

// Пример:

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

}

И в контроллере вы можете создать метод для получения таких данных: public int SearchFactoryCode (из IEnumerable вывода данных) { 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;
    }

Есть вопросы ко мне, если вы не понимаете моих идей.

0 голосов
/ 25 марта 2011

Вам необходимо загрузить соответствующие данные для раскрывающегося списка № 2 для выбранного элемента из раскрывающегося списка № 1 с вашего сервера динамически.Найдите в вашей любимой поисковой системе «jquery loadJSON» или «php ajax» в целом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...