[英]Select an option from a datalist and compare index number to another option in a second datalist
[英]Removing datalist option from second input
我有两个不能相同的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>
您可以使用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
。 使用新代码解决了这种情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.