javascript - 一些具有隐藏值的数据列表标签
问题描述
我在这里找到了代码:
<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>
它的工作很棒。但是当我添加第二个数据列表代码时,只向我发送第一个数据列表中的值。如何让它从几个数据列表中向我发送价值?
解决方案
为了实现目标,您需要将事件处理程序分配给input
您希望包含此功能的所有合适元素。用于querySelectorAll
获取这样的节点列表并遍历以分配您的input
事件处理程序。
为了简洁和方便,我简化了 IDs/data-ids。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>
推荐阅读
- python - 将视频流从前端(angularjs)发送到后端(Django)
- react-native - react-native-ibm-mobilefirst 授权被重定向到未知 URL https://mfpredirecturi
- java - 引用第二个数组
- angular - 如何更改 mat 表中的列名和值
- php - WSO2 IS 5.9 注销:没有与提供的会话索引对应的已建立会话
- c - 如何抑制 PC lint 中符号的单个 MISRA 2004 规则
- python - 将 Tokenize2 JSON 搜索函数从 PHP 转换为 Python
- oracle - 试图在 plsql 中接受用户输入但不工作
- bash - 如何在 bash 中重新分配变量?
- c# - 如何等到事件在c#中处理