我在这里有两个下拉菜单,而Task Type
下拉菜单有问题。
我需要一个JS来调用函数categoryChange
,并在$Task_type = Value.From.DB
<?php if ($update == true): ?>
。
我刚刚开始学习PHP并为自己建立了一个网站,而我对JS的了解还不多。
HTML代码:
<!-- Start Category and task type code-->
Category:<select id="continent" name="category" onchange="categoryChange(this);" class="form-control" required>
<option value="empty">Select a Category</option>
<option value="Support">Support</option>
<option value="Workplace">Workplace</option>
<option value="New Employee">New Employee</option>
<option value="Resigned Employee">Resigned Employee</option>
<option value="Installation">Installation</option>
<option value="Meetings">Meetings</option>
<option value="Update/Maintenance">Update/Maintenance</option>
<option value="Test">Test</option>
<option value="New Projects">New Projects</option>
<?php if ($update == true): ?>
<script type="text/javascript">
function setSelectedIndex(s, valsearch) {
// Loop through all the items in drop down list
for (i = 0; i < s.options.length; i++) {
if (s.options[i].value == valsearch) {
// Item is found. Set its property and exit
s.options[i].selected = true;
break;
}
}
return;
}
setSelectedIndex(document.getElementById("continent"),"<?php echo $category; ?>");
</script>
<?php endif ?>
</select>
Task Type:<select id="category" name="task_type" class="form-control" required>
<option value="0">Select a Task Type</option>
<?php if ($update == true): ?>
<script type="text/javascript">
categoryChange("<?php echo $category; ?>");
</script>
<?php endif ?>
</select>
JS代码:
//<![CDATA[
// array of possible countries in the same order as they appear in the category selection list
var categoryLists = new Array(4)
categoryLists["empty"] = ["Select a category"];
categoryLists["Support"] = ["Fast Support", "Remote Desktop", "Printer Maintenance"];
categoryLists["Workplace"] = ["Move Desk", "New Employee preparation"];
categoryLists["New Employee"] = ["Create User"];
categoryLists["Resigned Employee"]= ["Disable user", "Delete user"];
categoryLists["Installation"]= ["Meeting rooms", "Defect Desk/Table", "Prepare Devices", "Reinstallation computer", "Power loss / server breakdown", "New headset"];
categoryLists["Meetings"]= ["IT Internal Meeting", "IT Education"];
categoryLists["Update/Maintenance"]= ["Monthly", "Software Maintenace", "Vmware", "Server OS upgrades/Migrations", "Server Physical upgrades"];
categoryLists["Test"]= ["Windows 10", "Software"];
categoryLists["New Projects"]= [" (Lasernet, Skype, Bitabiz, Astrow)", "Investigate new projects", "New IT securities/scripts"];
/* categoryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function categoryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the categoryLists array
cList = categoryLists[which];
// get the category select element via its known id
var cSelect = document.getElementById("category");
// remove the current options from the category select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>