-2

I have a problem with select menu on my html page (bootstrap, jquery, js). On my requirement, the select menu (see the pictures below) should, at the first time show only 1,2,3 and others and if the user chooses "others" a sub menu should appeare on the same select menu allowing the user to choose 4 and 5 options without hiding the old menu.

enter image description here

enter image description here

I tried to do it with some Jquery code (by appending the 4 and 5 options when the user clicks on other option) the problem is the select is closed when I choose the other option. 

<select name="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="others">Others</option>
</select>

$(function(){
    $('select[name=mySelect]').on('change', function(){
        var selected = $(this).val();
        if(selected && selected == 'others'){
            $(this).children().last().remove();
            $(this).append('<option value="4">4</option><option value="5">5</option>');
            $(this).click();
        }
    });
});

How to disable the select closing when the user clicks on "Other" option?

Bharata
  • 13,509
  • 6
  • 36
  • 50
user2602584
  • 737
  • 2
  • 7
  • 25
  • 2
    Yes, there probably is. What have you tried? What went wrong? Where's the code of your attempts? Please take a read of the "*[mcve]*" and "*[ask]*" guidelines; and, if you haven't already, take the [tour]. – David Thomas Jan 14 '18 at 23:14
  • @DavidThomas I tried to do it with some Jquery code (by on appending the 4 and 5 options when the user clicks on other option) the problem is the select is closed when I choose the other option. What I want to do is different, the select stay opend when the user clicks on other option. NB: I used the same code in the first response on my question (see bellow) thanks – user2602584 Jan 14 '18 at 23:37
  • So show that code, explain the problem(s) and why it didn't work. – David Thomas Jan 14 '18 at 23:38
  • @DavidThomas I used the same code in the first answer on my question ( see bellow) my problem is on how to disable the select closing. – user2602584 Jan 14 '18 at 23:54
  • I'm not sure why you're refusing, or otherwise unwilling, to show your code but rather than argue about that matter I've voted to close. Given that the code below is unlikely to work, you may wish to make that point in a comment to that answer. If your problem is "how to disable the select closing?" then you really should have asked that specific question. – David Thomas Jan 15 '18 at 00:10
  • @DavidThomas I updated my question. – user2602584 Jan 15 '18 at 17:34

1 Answers1

2

Fore example like this.
HTML:

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="Others">Others</option>
</select>

JQuery:

$("select").change(function() {
  if($(this).val() == "Others") {
     $(this).append("<option value='5'>5</option>").find("option:selected").text("4").val("4");
  }
});

https://codepen.io/anon/pen/opMwvp

To disable closing the select, see this answer

Sergey Benzenko
  • 280
  • 2
  • 14