Ad

How Can I Select Multiple Times The Same Option In An HTML Select In JQuery Or JS?

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:

  1. First view without option:

intro

  1. Choose the Custom Time:

Smartphone:

optionsS

Tablet (<10 in):

optionsT

Table (10+ in) with Select2:

optionsT10

  1. Change times:

custom options

  1. Selected option:

select 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.:

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

Answer

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>
Ad
source: stackoverflow.com
Ad