Question

我想在HTML中构建一个这种类型的选择选项树（基本上我想要实现与this类似的东西，但是还有一个级别和用户可编辑的选项。

第一级选项1（选项不可编辑）选项2（选项不可编辑）选项3（选项不可编辑）

第二级根据我在第二个选择元素中的第一级选择，我想显示一些特定的选项（必须由用户编辑，所以我想也许我应该使用datalist元素）

就像这样如果我在下面的第二个列表中选择选项1，我将显示

SubOption 1-1（可编辑） SubOption 1-2（可编辑） SubOption 1-3（可编辑）

然后包含更多级别（可编辑），这取决于我选择哪个SubOption。

因此，如果我选择SubOption1，我将会在以下列表中列出：

SubSubOption 1-1（可编辑） SubSubOption 1-2（可编辑） SubSubOption 1-3（可编辑）

我正在考虑使用datalist元素，但问题是如果我使用datalist，我无法检索选择了哪个选项...这意味着我无法知道当前在datalist中选择的选项的数量还是我错了？有任何想法吗？非常感谢您的帮助

这里是我写的代码：

<h4>Configure your request</h4><br>
<form id="requestForm" name="requestFormName">
    Select the type of API<br>

    <select id="datalistApiTypes" name="apiTypeSelector" onChange="updateRequests(this.selectedIndex)" style="width: 150px">
            <option  value="0">Select an option</option>
            <option  value="1">Pearson</option>
            <option  value="2">EnglishCo</option>
            <option  value="3">Mobile</option>
            </select>
    <br>
    <br>

    <select id="methodToUse">
              <option value="GET">GET</option>
              <option value="PUT">PUT</option>
              <option value="POST">POST</option>
            </select>
    <br><br> Request URI <br>
    <input id="inputDatalistRequestUri" type="text" list="datalistRequestUri" style="width:600px" onChange="setRequestData(this)" />

    <datalist id="datalistRequestUri">
            </datalist>

    <br><br> Request Data <br>
    <input id="inputDatalistRequestData" class="formField" type="text" list="datalistRequestData"> <br><br>

    <datalist id="datalistRequestData">
            </datalist>

</form>
<script type="text/javascript">
    var apiRequestsList = document.getElementById("datalistRequestUri");
    var apiRequestDataList = document.getElementById("datalistRequestData");

    var requests = new Array();
    requests[0] = "";
    requests[1] = ["Pearson Platform Status Check|https://pearsontest.ispeakuspeak.com/api/v1/ping", "Get Pearson Partners|https://pearsontest.ispeakuspeak.com/api/v1/partners/8d4415ee-1a6d-405a-873a-f36f98b3b9dd"];
    requests[2] = ["Platform Status Check|https://englishcotest.ispeakuspeak.com/api/v1/ping", "", "Get Partners|https://englishcotest.ispeakuspeak.com/api/v1/partners/8d4415ee-1a6d-405a-873a-f36f98b3b9dd,9ac6c60d-8129-40d8-b959-2b43a1d463bd"];
    requests[3] = ["Platform Status Check|https://mobiletest.ispeakuspeak.com/api/v1/ping", "StudentHomepage|https://mobiletest.ispeakuspeak.com/api/v1/student/fd1b215a-2aad-4a30-a944-3abea112f83e/homepage"];

    function updateRequests(selectedApiType) {

        document.getElementById("inputDatalistRequestUri").value = null;
        apiRequestsList.innerHTML = '';

        if (selectedApiType > 0) {

            for (i = 0; i < requests[selectedApiType].length; i++) {

                var optionToAdd = new Option(requests[selectedApiType][i].split("|")[0], requests[selectedApiType][i].split("|")[1]);
                apiRequestsList.appendChild(optionToAdd);

            }

        }

    }

    function setRequestData(selectedRequest) {

        //here I'd like to add a function that does something specific according to the request selected. How can I know which request was selected?

    }
</script>

选择具有可编辑选项的树

0 个答案: