时间戳

首页 > 解决方案 > 从第二个输入中删除 datalist 选项

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

问题描述

我有两个不能相同的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>

标签： javascripthtmlformshtml-datalist

解决方案

您可以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。这种情况已用新代码修复。

推荐阅读