on select change, open another select element

Question

First time here. I've got a problem with a form I'm working on. I have many select elements like this one in several fieldsets:

<select id="FP1" class="form-control">
  <option value="" disabled selected class="hidden">Score</option>
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

What I need: When the user select an option, another select element opens up.

I tried the HTML onchange Event Attribute, this jquery alternative also with the change event but none worked for me so far. Any help? Thanks

$("select").onchange(function() {
  $(this).next().find("select").focusIn();
});

You wanna make it opened? Like show the options? If so, I don't think it's possible. But let me try. — Praveen Kumar Purushothaman, Jan 07 '17 at 07:56
@PranavCBalan Check out my answer, there are more than that! — Praveen Kumar Purushothaman, Jan 07 '17 at 08:03
Focused is ok, expanded would have been really great but nevermind :) — J.M., Jan 07 '17 at 08:11
See this: http://stackoverflow.com/q/430237, it is not possible. — Praveen Kumar Purushothaman, Jan 07 '17 at 08:15

Praveen Kumar Purushothaman · Accepted Answer · 2017-01-07T08:07:09.657

1

Many issues:

The event function should be .change().
See the case of focusin(). But you should use focus() to focus into the next select, not focusin().
No use of find().

As far as jQuery's event is concerned, it's .change():

$(function () {
  $("select").change(function () {
    $(this).next("select").focus();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="FP1" class="form-control">
  <option value="" disabled selected class="hidden">Score</option>
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select>
  <option></option>
</select>

edited Jan 07 '17 at 08:07

answered Jan 07 '17 at 07:57

Praveen Kumar Purushothaman

164,888
24
203
252

Your code doesn't work..the second select don't focus. You need to use `focus` method. – Mihai Alexandru-Ionut Jan 07 '17 at 08:05
@Alexandru-IonutMihai Sure... Not sure why the OP used `focusin`. – Praveen Kumar Purushothaman Jan 07 '17 at 08:06
Thank you for your answer but when i'm running your snippet, it's not working. The focus is not going on the next select element. Am I still doing something wrong? – J.M. Jan 07 '17 at 08:06
@J.M. You need to use the `focus()` event, and not `focusin()`, I had updated it in my answer. Check the snippet now? – Praveen Kumar Purushothaman Jan 07 '17 at 08:07
Got it! Thanks Praveen Kumar – J.M. Jan 07 '17 at 08:10
I am confused what is asked. From the question, I see that the person wants to open up a second select element. But you provided a solution which doesn't open up the second select element (i.e. get focus only). – Sajib Biswas Jan 07 '17 at 08:38
@SajibBiswas See my previous comment and then tell your feedback. Ironically, I have commented that twice in the question, in my answer and added it in my answer as well. – Praveen Kumar Purushothaman Jan 07 '17 at 08:39
Exactly. The ans is NO, this functionality cant be achieved. Or you can mark this question as duplicate. – Sajib Biswas Jan 07 '17 at 08:43
@SajibBiswas But the OP had different multiple issues, which I addressed, which makes this question **not** a duplicate of the other question. Do you get it? – Praveen Kumar Purushothaman Jan 07 '17 at 08:44
Actually, if the asked functionality cant be achievable, then why to analyse his code for further errors? – Sajib Biswas Jan 07 '17 at 08:49
1

@SajibBiswas That's not the intent of Stack Overflow. People have a huge trust on this developer base to come here. And when they come, they not only get their problem solved, but also their code gets reviewed and they leave happily. This question can have one single answer as **NO**, and think the mindset of the user and now. You get it right? Do you agree with what I say? Think in their shoes. What if you have a similar problem, but your code has some issues, which you aren't aware of. – Praveen Kumar Purushothaman Jan 07 '17 at 08:52

on select change, open another select element

1 Answers1