Removing datalist option from second input
Question
I have two HTML datalist inputs (for first and second language) that can't be the same . 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. Any suggestions with React are also welcome.
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>
1 answers
solution1
1 2020-04-13 14:20:13
You can achieve this using jQuery by using two datalist elements and detecting the change in the inputs as follows:
<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 . This situation was fixed with new code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.