javascript - 使用 Javascript 自动预选下拉菜单

Question

我在这里有两个下拉菜单，我对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);
        }
    }
}
//]]>

标签： javascriptphp