如何使用 javascript 强制下拉列表表现得像列表框
How to force a dropdown list to behave like a list box using javascript
我需要将 multiple
属性添加到 select list
,但不幸的是下拉列表无法通过 HTML 编辑,因为它是 CMS 的拖放功能(Spiceworks用户门户)我正在使用。
CMS 已经过时了;我唯一的其他选择是添加复选框,这会使页面变得非常长,因为 select 总共有 15 个选项。 (在我的示例中,这是不同的)
CMS 中没有列表框选项,这就是为什么我需要使用 javascript 强制下拉列表像列表框一样工作。
请看这里我尝试做的事情:https://jsfiddle.net/jamiedewitz/sdyn0xqz/
有没有办法强制 javascript 将 multiple
属性添加到下拉列表中,或者这只是一厢情愿?
当然
const addMultiple = select => select.setAttribute('multiple', true);
然后您可以使用 CSS selector 来定位一个或多个元素
addMultiple(document.querySelector('#custom_ticket_form_field_55'))
document.querySelectorAll('select').forEach(addMultiple)
顺便说一句,id="custom_ticket_form_field_55"
在您的 HTML 中的多个地方使用,所以实际上第一个变体不起作用。如果可以,请尝试使您的 ID 独一无二。
请注意,它还会破坏可访问性,因为您的标签不再指向 select。
我需要将 multiple
属性添加到 select list
,但不幸的是下拉列表无法通过 HTML 编辑,因为它是 CMS 的拖放功能(Spiceworks用户门户)我正在使用。
CMS 已经过时了;我唯一的其他选择是添加复选框,这会使页面变得非常长,因为 select 总共有 15 个选项。 (在我的示例中,这是不同的)
CMS 中没有列表框选项,这就是为什么我需要使用 javascript 强制下拉列表像列表框一样工作。
请看这里我尝试做的事情:https://jsfiddle.net/jamiedewitz/sdyn0xqz/
有没有办法强制 javascript 将 multiple
属性添加到下拉列表中,或者这只是一厢情愿?
当然
const addMultiple = select => select.setAttribute('multiple', true);
然后您可以使用 CSS selector 来定位一个或多个元素
addMultiple(document.querySelector('#custom_ticket_form_field_55'))
document.querySelectorAll('select').forEach(addMultiple)
顺便说一句,id="custom_ticket_form_field_55"
在您的 HTML 中的多个地方使用,所以实际上第一个变体不起作用。如果可以,请尝试使您的 ID 独一无二。
请注意,它还会破坏可访问性,因为您的标签不再指向 select。