将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值
Posted
技术标签:
【中文标题】将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值【英文标题】:attach HTML-Select to Inputs and store them values once user click Save button 【发布时间】:2016-03-21 02:59:18 【问题描述】:我正在处理使用纯 javascript 从复选框列表中获取值,其中每个复选框都有一个选择字段。
我有这个 HTML(带有三个复选框示例)
<section class="options-list">
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-01" id="cb-01" name="checkboxStatus"/>
<label for="cb-01">Page Load Time</label>
<select id="type-01" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-02" id="cb-02" name="checkboxStatus"/>
<label for="cb-02">DB Query</label>
<select id="type-02" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<div>
<input type="checkbox" class="cb" value="valueForCheckbox-03" id="cb-03" name="checkboxStatus"/>
<label for="cb-03">Server Response Time</label>
<select id="type-03" name="optionSelected">
<option value="001">001</option>
<option value="002">002</option>
<option value="003">003</option>
<option value="004">004</option>
</select>
</div>
<input type="button" id="save-data" value="Save" onclick="userChoice('checkboxStatus', 'optionStatus')"/>
</section>
以下 JS 正在工作以获取选中的元素
var checkboxes = [];
function userChoice(checkboxName, options)
checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), cbSelected = [];
Array.prototype.forEach.call(checkboxes, function(el)
cbSelected.push(el.value);
return cbSelected;
);
return cbSelected;
我不确定这是否是最好的方法,但剩下的部分是获取选项值并链接到复选框。
最后我不确定存储这些数据的最佳方式,你有什么建议?数组数组?... [[checkboxSelected.value, option.value][checkboxSelected.value, option.value]]
...对象数组... [state: "checked", option: valuestate: "checked", option: value]
..或者可能是另一个想法
【问题讨论】:
【参考方案1】:您可以通过引用每个复选框来获得选择。类似于cbSelected.parentNode.querySelector('select')
。我个人会使用对象数组来存储数据,但也可以使用数组数组,或者将对象用作地图。
var model1 = [
'type' : 'checkbox',
'id' : '01',
'checked' : true
,
'type' : 'select',
'id' : '01',
'value' : 002
];
var model2 =
'01' :
'checkbox' : true,
'option' : '002'
,
'02' :
'checkbox' : false,
'option' : 'default'
;
【讨论】:
感谢您的回复,这样就可以有一个 html 选择兄弟,对吗?我可以将 getElementsByClassName 或 ById 与 parentNode 一起使用,而不是使用 querySelector 吗?只是我不知道将来我是否需要另一个 你可以使用任何你想要的选择器,但我已经养成了使用 querySelector 和 querySelectorAll 的习惯,而不是 getElementByXXX,因为你可以在 querySelector 中使用的 css 选择器更具表现力.这让我可以删除很多我曾经需要的 id 和类,只是为了有效地选择一个节点。 但是使用 querySelector(" ") 我们定位所有标签对吗?就像在 TagName 中一样,所以我认为它很危险(可能我错了) querySelector 为您提供第一个匹配的节点,querySelectorAll 将为您提供包含所有匹配项的 nodeList(类似数组的对象)。因此 querySelectorAll('.my-name') 将获取所有具有类 'my-name' 的元素,因此等效于 getElementsByClassName('my-name') 不同之处在于 getElementXXX 提供了一个实时的 htmlcollection 和 querySelector 将接受复杂的 css 选择器,如“table.myClass td:first-child > span.otherClass”等,因此您可以使用您在 css 文件中使用的选择器。更多信息:developer.mozilla.org/nl/docs/Web/API/Document/querySelector 太棒了!我不知道我可以使用 css 伪选择器。非常感谢。以上是关于将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值的主要内容,如果未能解决你的问题,请参考以下文章