Question

资深开发者，

我已经创建了一段时间的应用程序，它相对有用。但是，只有一个限制，我没有找到解决方法，是的，我已经阅读了多个类似的问题：

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

包括，甚至其他非StackOverFlow论坛，我已经读过数千遍使用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);
    }
});

但是，我的主要挑战是，每个人都可以选择一个以上的选项，这有点棘手，因为在这一点上，他们需要先选择另一个选项，然后再选择一个，最后一个选项，我敢肯定将对任何人都不符合。您可以在以下图像中查看步骤：

不带选项的第一个视图：

选择自定义时间：

智能手机：

平板电脑（<10英寸）：

带有Select2的表格（超过10英寸）：

更改时间：

所选选项：

关于某人如何在不单击其他位置的情况下多次选择同一选项的任何建议或解决方法？感谢您的想法。

PS：

我知道click事件仅在 Firefox 中有效，并且由于这是Android的移动应用程序，因此无法正常工作。
我测试了类似于select2的自定义选择，但没有成功。

Answer 1

这可能会帮助您。这些选项可以根据您的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或JS中的HTML选择中多次选择同一选项？

1 个答案: