How can I select multiple times the same option in an HTML select in jQuery or JS?

Question

Fellow developers,

I've been creating an app for a while and it has been relatively useful. However, there is only one limitation that I haven't found how to fix and yes, I have read multiple similar issues:

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

Including, even other non-StackOverFlow forums and I have read thousands of times that I need to use the change event from jQuery and I knew it since I used it before. This is my code:

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

However, my main challenge is that anyone can select more than once the last option and it's a bit tricky since at this point, they need to choose first another option and one more time the last one, which I'm sure it will unconformable to anyone. You can see the steps in the following images:

First view without option:

Choose the Custom Time:

Smartphone:

Tablet (<10 in):

Table (10+ in) with Select2:

Change times:

Selected option:

Any advice or workaround of how someone can someone choose multiple times the same option without doing click somewhere else? Thanks for your ideas.

P.S.:

I know that the click event only works in Firefox and since this is a mobile app for Android, it won't work.
I tested custom selects like the select2 without any success.

Change from select to radio group and add verification on which options can be checked at the same time. — Goran.it, Jan 13 '19 at 09:15
You can mimic select tag with overriding the checkbox look and feel, it can be done in a way that the output would appear identical to your first modal with selections. But before that, do you use radio group or select tag ? — Goran.it, Jan 13 '19 at 09:19
The popup is just the normal select from Android, I didn't do any special customization. I'd like to keep the same structure, I shared the full steps, I added 2 screens more. Thanks. @Goran.it — Federico Navarrete, Jan 13 '19 at 09:21
In that case, select supports `multiple` attribute which allows you to select more than one options. Beside that you need to add verification on what option was selected last - check if there is already a selected option .. do some logic and in case combination isn't allowed return evt.preventDefault which should stop selecting forbidden cases. — Goran.it, Jan 13 '19 at 09:24
I cannot select multiple options only one option at the time, but the same option could be selected a second time. @Goran.it — Federico Navarrete, Jan 13 '19 at 09:25

AKSHAY V MADALGI · Accepted Answer · 2019-01-13T10:06:22.720

This might help you out. The options can be given as input options based on you UI. so you can use the input tags itself which on click of the selected option it triggers event as well

<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>

I think this could be a kind of backup plan, but it's not exactly the best solution since in a tablet for example, I don't have that view of the popup with Radio Buttons since that's the native code of Android. — Federico Navarrete, Jan 13 '19 at 11:06

How can I select multiple times the same option in an HTML select in jQuery or JS?

1 Answers1