javascript - 如何在 jQuery 或 JS 的 HTML 选择中多次选择相同的选项?

标签 javascript android jquery onclick html-select

各位开发者,

我创建应用程序已经有一段时间了,它相对有用。然而,只有一个限制我还没有找到如何解决,是的,我已经阅读了多个类似的问题:

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);
    }
});

但是,我的主要挑战是任何人都可以多次选择最后一个选项,这有点棘手,因为在这一点上,他们需要先选择另一个选项,然后再选择最后一个选项,我确信这一点会不服于任何人。您可以在下图中看到步骤:

  1. 第一次查看(不带选项):

intro

  • 选择自定义时间:
  • 智能手机:

    optionsS

    平板电脑(<10 英寸):

    optionsT

    table (10+ 英寸),带有 Select2 :

    optionsT10

  • 更改时间:
  • custom options

  • 所选选项:
  • select option

    关于如何让某人多次选择同一选项而不点击其他地方,有什么建议或解决方法吗?感谢您的想法。

    附注:

    1. 我知道 click 事件仅在 Firefox 中有效,并且由于这是 Android 移动应用,因此它不起作用。
    2. 我测试了像 select2 这样的自定义选择,但没有成功。

    最佳答案

    这可能会帮助你。 这些选项可以根据您的 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>
    

    关于javascript - 如何在 jQuery 或 JS 的 HTML 选择中多次选择相同的选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54167440/

    相关文章:

    javascript - 从最后一个元素开始按顺序将类添加到元素集合中

    javascript - 为什么我的 jQuery/YQL 调用没有返回任何内容?

    javascript - 服务器端实现中的 Facebook 登录图像

    android - 当焦点和取消焦点时更改图标 Android Tab 小部件

    java - 从 Dropbox 中的 txt 文件下载文本

    javascript - 多个空白变量声明有什么区别

    android - 为什么Android SDK工具会被分成 "platform-tools"和 "tools"目录?

    javascript - 如何在 Oracle APEX 中使用多个数据 ID?

    php - 使用 PHP/JS 自动刷新 Highcharts

    javascript - 创建动态 slider jQuery