几个具有隐藏值的datalist标签
几个具有隐藏值的datalist标签
提问于 2021-07-17 21:34:21
我在这里找到了这个代码：
<form action="<?php echo $adresstrust; ?>" method="post" >
<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
<option data-value="42">The answer</option>
<option data-value="43">The answer3</option>
<option data-value="44">The answer4</option>
</datalist>
<input list="suggestionList2" id="answer2Input">
<datalist id="suggestionList2">
<option data-value="42">The answer</option>
<option data-value="43">The answer3</option>
<option data-value="44">The answer4</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
<input type="hidden" name="answer2" id="answer2Input-hidden">
<input type="hidden" name="ala" value="tutaj">
<input type="submit" name="" value="Start">
</form>
<script type="text/javascript">
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for(var i = 0; i < options.length; i++) {
var option = options[i];
if(option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
</script>这是一项伟大的工作。但是当我添加secound datalist代码时，只向我发送来自第一个datalist的值。如何让它向我发送来自几个日期论者的价值？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-17 23:16:14
为了实现这一目标，您需要将事件处理程序分配给您希望包含此功能的所有合适的input元素。使用querySelectorAll获取这样的节点列表并遍历以分配您的input事件处理程序。
为了简洁和方便，我简化了I/data-I。Dataset属性可以重复，因此在多个元素上使用data-id=x是可以接受的，因为在多个元素上使用id=x是不合法的。这有助于以后选择隐藏的元素，并意味着更简单的HTML代码。
贯穿inputhandler函数的注释应该有助于阐明每个点上正在发生的事情。
document.addEventListener('DOMContentLoaded',(e)=>{
const inputhandler=function(e){
// Find the appropriate datalist associated with current text input element.
let list=document.querySelector( 'datalist#' + this.getAttribute('list') );
// Find all the options within this datalist.
let options=list.querySelectorAll('option');
// Find the appropriate hidden input field based upon list attribute from current text input element.
let input=document.querySelector('input[type="hidden"][ data-list="'+this.getAttribute('list')+'" ]');
// Set the value of the hidden input to that of text element.
input.value=this.value;
// Iterate through `some` of the options - stop when a condition is met.
Array.from( options ).some( opt=>{
if( opt.textContent.trim()===this.value.trim() ){
// condition has been satisfied - set hidden input element value
input.value=opt.dataset.value;
// display formatted message in the console
console.log(
'The hidden field "%s" has been assigned "%s" as it\'s new value',
input.name,
input.value
);
// stop iteration of nodelist - job done.
return true;
}
})
};
document.querySelectorAll( 'input[list]' ).forEach( input=>input.addEventListener('input',inputhandler));
})<form method='post' action="<?php echo $adresstrust; ?>">
<input type='text' list='list1' />
<datalist id='list1'>
<option data-value='42'>The answer
<option data-value='43'>The answer3
<option data-value='44'>The answer4
</datalist>
<input type='text' list='list2' />
<datalist id='list2'>
<option data-value='42'>The answer
<option data-value='43'>The answer3
<option data-value='44'>The answer4
</datalist>
<input type='hidden' name='answer' data-list='list1' />
<input type='hidden' name='answer2' data-list='list2' />
<input type='hidden' name='ala' value='tutaj' />
<input type='submit' value='Start' />
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68420975
复制相关文章
相似问题
腾讯云开发者
