Javascript 是否可以在不单击的情况下一次显示 HTML 选择表单字段中的所有选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31010787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to show all options from an HTML Select form field at once without clicking it?
提问by JasonDavis
I am using the X-Editable jQuery edit in place library for a Task Status selection field. All it;s stages are shown below from the process of:
我正在将 X-Editable jQuery 就地编辑库用于任务状态选择字段。它的所有阶段如下所示：
- Clicking the Status
- It then hides the status SPAN and reveals the hidden Selection field.
- You can click the selection field which makes it dropdown and show all available options.
- Clicking a new Selection option value then shows a loading spinner image while it makes an AJAX request to save the value
- It then Shows the new selected Status Value SPAN.
- Clicking again restarts the cycle/process.
- 点击状态
- 然后隐藏状态 SPAN 并显示隐藏的选择字段。
- 您可以单击选择字段，使其成为下拉菜单并显示所有可用选项。
- 单击一个新的选择选项值，然后在它发出 AJAX 请求以保存该值时显示一个正在加载的微调器图像
- 然后显示新选择的状态值 SPAN。
- 再次单击将重新启动循环/过程。
I am however trying to come up with a better way to select a new value. There are only 3 selection options so I would like to possibly show all 3 items at once instead of requiring you to click the dropdown to see the other 2 options.
然而，我试图想出一种更好的方法来选择一个新值。只有 3 个选择选项，所以我想一次显示所有 3 个项目，而不是要求您单击下拉列表以查看其他 2 个选项。
Is it possible to do that with a basic Selection or does it require a Multi-selectfield?
是否可以使用基本选择来做到这一点，还是需要多选字段？
回答by Sean Wessell
Are you looking for a list or do you still want a dropdown with the options shown as default. For a list style you could use the size attribute with the select element.
您是在寻找列表还是仍然想要一个带有默认选项的下拉列表。对于列表样式，您可以将 size 属性与 select 元素一起使用。
HTML
HTML
<select size="3">
<option>Not Started</option>
<option selected>In Progess</option>
<option>Completed</option>
</select>
CSS
CSS
select{
overflow:auto;
}
回答by user2095113
$("#Id_Selecteventtype")[0].selectedIndex = 1;
$("#Id_Selecteventtype")[0].selectedIndex = 1;
