从第二个输入中删除 datalist 选项

Question

I have two HTML datalist inputs (for first and second language) that can't be the same .我有两个不能相同的HTML 数据列表输入（用于第一和第二语言）。 Instead of not accepting the form, I want the first option chosen to be removed dynamically from the second datalist but I can't make anything work with JQuery.我不想接受表格，而是希望从第二个数据列表中动态删除选择的第一个选项，但我无法使用 JQuery 进行任何操作。 Any suggestions with React are also welcome.也欢迎任何有关 React 的建议。

Many thanks!非常感谢！

 <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

You can achieve this using jQuery by using two datalist elements and detecting the change in the inputs as follows:您可以使用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>

UPDATE: Removed items never go back if users remove the text in fLang or sLang .更新：如果用户删除fLang或sLang 。 This situation was fixed with new code.使用新代码解决了这种情况。

从第二个输入中删除 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