從第二個輸入中刪除 datalist 選項

Question

我有兩個不能相同的HTML 數據列表輸入（用於第一和第二語言）。 我不想接受表格，而是希望從第二個數據列表中動態刪除選擇的第一個選項，但我無法使用 JQuery 進行任何操作。 也歡迎任何有關 React 的建議。

非常感謝！

 <form autocomplete="on" method="POST"> <input id="fLang" type="text" list="language" onchange="removeLang()" placeholder="First language"> <input id="sLang" type="text" list="language" onchange="removeLang()" placeholder="Second language"> <datalist id="language"> <option value="Chinese">China</option> <option value="English">United Kingdom</option> <option value="Russian">Russia</option> </datalist> </form>

Answer 1

您可以使用jQuery通過使用兩個datalist列表元素並檢測輸入中的更改來實現此目的，如下所示：

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <form autocomplete="on" method="POST">
        <input id="fLang" type="text" list="flanguage" placeholder="First language">
        <input id="sLang" type="text" list="slanguage" placeholder="Second language">
        <datalist id="flanguage">
            <option id="fChinese" value="Chinese">China</option>
            <option id="fEnglish" value="English">United Kingdom</option>
            <option id="fRussian" value="Russian">Russia</option>
        </datalist>
        <datalist id="slanguage">
            <option id="sChinese" value="Chinese">China</option>
            <option id="sEnglish" value="English">United Kingdom</option>
            <option id="sRussian" value="Russian">Russia</option>
        </datalist>
    </form>
</body>
<script>
    var fRemovedItem;
    var sRemovedItem;
    $(document).ready(function () {
        $('#fLang').on('change', function () {
            let first = $('#fLang').val();
            if (first != '') {
                sRemovedItem = $(`#sLanguage option[value='${first}']`);
                sRemovedItem.remove();
            } else {
                let sDatalist = $("#slanguage");
                console.log(sDatalist);
                console.log(sRemovedItem);
                console.log(sDatalist.append(sRemovedItem));
            }
        });
        $('#sLang').on('change', function () {
            let second = $('#sLang').val();
            if (second != '') {
                fRemovedItem = $(`#fLanguage option[value='${second}']`);
                fRemovedItem.remove();
            } else {
                let fDatalist = $("#flanguage");
                console.log(fDatalist.append(fRemovedItem));
            }
        });
    });
</script>

</html>

更新：如果用戶刪除fLang或sLang 。 使用新代碼解決了這種情況。

從第二個輸入中刪除 datalist 選項

問題描述

1 個解決方案

解決方案1
1 2020-04-13 14:20:13

從第二個輸入中刪除 datalist 選項

問題描述

1 個解決方案

解決方案1 1 2020-04-13 14:20:13

解決方案1
1 2020-04-13 14:20:13