Javascript 从第二个输入中删除datalist选项
我有两个HTML数据列表输入（第一语言和第二语言）不能相同。与不接受表单不同，我希望选择的第一个选项从第二个数据列表中动态删除，但我无法使任何东西与JQuery一起工作。 我们也欢迎您对React提出任何建议Javascript 从第二个输入中删除datalist选项,javascript,html,forms,html-datalist,Javascript,Html,Forms,Html Datalist,我有两个HTML数据列表输入（第一语言和第二语言）不能相同。与不接受表单不同，我希望选择的第一个选项从第二个数据列表中动态删除，但我无法使任何东西与JQuery一起工作。 我们也欢迎您对React提出任何建议 非常感谢 您可以使用jQuery通过使用两个datalist元素并检测输入中的变化来实现这一点，如下所示： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery
非常感谢 您可以使用
jQuerydatalist<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>
中国
大不列颠联合王国
俄罗斯
中国
大不列颠联合王国
俄罗斯
var Fremovedtim；
var-sRemovedItem；
$（文档）.ready（函数（）{
$（'#fLang'）。on（'change'，function（）{
设first=$（'#fLang'）.val（）；
如果（第一个！=''）{
sRemovedItem=$（`sLanguage option[value='${first}']`）；
sRemovedItem.remove（）；
}否则{
设sDatalist=$（“#俚语”）；
控制台日志（sDatalist）；
console.log（sRemovedItem）；
log（sDatalist.append（sRemovedItem））；
}
});
$（'#俚语'）。on（'change'，function（）{
设second=$（'#俚语'）.val（）；
如果（秒！=''）{
fRemovedItem=$（`fLanguage选项[value='${second}']`）；
fRemovedItem.remove（）；
}否则{
设fDatalist=$（“#flanguage”）；
log（fDatalist.append（fRemovedItem））；
}
});
});
fLangsLang