我如何在 jQuery 或 JS 中的 HTML select 中多次 select 相同的选项?
How can I select multiple times the same option in an HTML select in jQuery or JS?
各位开发者,
我创建一个应用程序已经有一段时间了,它相对有用。但是,只有一个限制我还没有找到如何解决,是的,我已经阅读了多个类似的问题:
jquery select option click handler
click option in select by jquery?
simulating mouse click on select option with jquery
jQuery simulate click event on select option
jQuery click event not working on option element
包括,甚至其他非 Whosebug 论坛,我已经阅读了数千次我需要使用来自 jQuery 的更改事件,并且我知道它因为我以前使用过它。这是我的代码:
HTML:
<select id="selectTimes">
<option disabled="disabled">Select Speech</option>
<option value="0">Question of the Day (30s)</option>
<option value="1">4 to 6 min (Ice-breaker)</option>
<option value="2">5 to 7 min (Project 2-9)</option>
<option value="3">8 to 10 min (Project 10)</option>
<option value="4">1 to 1:30 min (Evaluator's intro)</option>
<option value="5">2 to 3 min (Evaluation)</option>
<option value="6">5 to 6 min (General Evaluator)</option>
<option value="7">1 to 2 min (Table Topics)</option>
<option value="8">10 to 12 min</option>
<option value="9">13 to 15 min</option>
<option value="10">18 to 20 min</option>
<option value="11">Custom</option>
</select>
jQuery:
$("#selectTimes").on("change", function () {
setLocalStorage("selected", $(this).val());
if ($(this).val() === "11")
$("#divCustomTime").modal();
else {
isCustom = false;
setLocalStorage("isCustom", isCustom);
}
});
然而,我的主要挑战是任何人都可以 select 最后一个选项不止一次,这有点棘手,因为在这一点上,他们需要先选择另一个选项,然后再选择最后一个选项,我敢肯定,这对任何人都是不合适的。您可以在下图中看到这些步骤:
- 没有选项的第一个视图:
- 选择自定义时间:
智能手机:
Tablet(<10 英寸):
Table(10+ 英寸)与 Select2:
- 更换次数:
- 选择的选项:
关于某人如何在不点击其他地方的情况下多次选择同一选项的任何建议或解决方法?谢谢你的想法。
P.S.:
- 我知道
click
事件仅在 Firefox 中有效,并且由于这是 Android 的移动应用程序,因此它不会有效。
- 我测试了像 select2 这样的自定义 select,但没有成功。
这可能会对您有所帮助。
这些选项可以作为基于您的输入选项给出 UI。所以你可以使用输入标签本身,点击所选选项它也会触发事件
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
.box
{
border:1px solid whitesmoke;
padding:10px 0px;
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="radio" name="selectest" value="name1" checked> Name1 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name2"> Name2 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name3"> Name3 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name4"> Name4 </input>
</div>
</body>
<script>
$("input").click(function(){
alert($(this).val());
});
</script>
</html>
各位开发者,
我创建一个应用程序已经有一段时间了,它相对有用。但是,只有一个限制我还没有找到如何解决,是的,我已经阅读了多个类似的问题:
jquery select option click handler
click option in select by jquery?
simulating mouse click on select option with jquery
jQuery simulate click event on select option
jQuery click event not working on option element
包括,甚至其他非 Whosebug 论坛,我已经阅读了数千次我需要使用来自 jQuery 的更改事件,并且我知道它因为我以前使用过它。这是我的代码:
HTML:
<select id="selectTimes">
<option disabled="disabled">Select Speech</option>
<option value="0">Question of the Day (30s)</option>
<option value="1">4 to 6 min (Ice-breaker)</option>
<option value="2">5 to 7 min (Project 2-9)</option>
<option value="3">8 to 10 min (Project 10)</option>
<option value="4">1 to 1:30 min (Evaluator's intro)</option>
<option value="5">2 to 3 min (Evaluation)</option>
<option value="6">5 to 6 min (General Evaluator)</option>
<option value="7">1 to 2 min (Table Topics)</option>
<option value="8">10 to 12 min</option>
<option value="9">13 to 15 min</option>
<option value="10">18 to 20 min</option>
<option value="11">Custom</option>
</select>
jQuery:
$("#selectTimes").on("change", function () {
setLocalStorage("selected", $(this).val());
if ($(this).val() === "11")
$("#divCustomTime").modal();
else {
isCustom = false;
setLocalStorage("isCustom", isCustom);
}
});
然而,我的主要挑战是任何人都可以 select 最后一个选项不止一次,这有点棘手,因为在这一点上,他们需要先选择另一个选项,然后再选择最后一个选项,我敢肯定,这对任何人都是不合适的。您可以在下图中看到这些步骤:
- 没有选项的第一个视图:
- 选择自定义时间:
智能手机:
Tablet(<10 英寸):
Table(10+ 英寸)与 Select2:
- 更换次数:
- 选择的选项:
关于某人如何在不点击其他地方的情况下多次选择同一选项的任何建议或解决方法?谢谢你的想法。
P.S.:
- 我知道
click
事件仅在 Firefox 中有效,并且由于这是 Android 的移动应用程序,因此它不会有效。 - 我测试了像 select2 这样的自定义 select,但没有成功。
这可能会对您有所帮助。 这些选项可以作为基于您的输入选项给出 UI。所以你可以使用输入标签本身,点击所选选项它也会触发事件
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
.box
{
border:1px solid whitesmoke;
padding:10px 0px;
display:block;
}
</style>
</head>
<body>
<div class="box">
<input type="radio" name="selectest" value="name1" checked> Name1 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name2"> Name2 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name3"> Name3 </input>
</div>
<div class="box">
<input type="radio" name="selectest" value="name4"> Name4 </input>
</div>
</body>
<script>
$("input").click(function(){
alert($(this).val());
});
</script>
</html>