javascript - Javascript 中的下拉菜单

Question

我如何制作一个 javascript 来调用categoryChange函数，并从中搜索并选择一个选项categoryLists。

例如$category = "Meeting rooms";

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);
        }
    }
}
//]]>

HTML 代码：

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>

标签： javascriptphphtml