Javascript: Setting a dropdown based on another dropdown selection

I have 2 dropdowns, mySelect and myMins

When a selection is made from mySelect, I want to check and see if it is the last option in the list. If it is, I want to set myMins to the first option and disable it. If not, enable myMins.

How would I do this?
Mike MillerSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The principle of linking dropdowns is explained in this article
https://www.experts-exchange.com/articles/28828/Creating-linked-dropdowns-using-jQuery-and-PHP.html

For your specific requirement you need to attach an event handler to the first drop down
HTML
<select name="mySelect" id="mySelect">
    <option value="">Choose</option>
    <option value="somevalue1">SomeValue1</option>
    <option value="somevalue2">SomeValue2</option>
    <option value="somevalue3">SomeValue3</option>
</select>
<select name="myMins" id="myMins">
    <option value="">Choose</option>
    <option value="minsvalue1">MinsValue1</option>
    <option value="minsvalue2">MinsValue2</option>
    <option value="minsvalue3">MinsValue3</option>
</select>

Open in new window

<script>
var lastval = $('#mySelect option:last-child').val();
var firstval = $('#myMins option:eq(1)').val();

$(function() {
  $('#mySelect').change(function() {
    if (this.value == lastval) {
      $('#myMins').val(firstval).prop({disabled: true});
    }
    else {
      $('#myMins').val('').prop({disabled: false});
    }
  });
});
</script>

Open in new window


Working sample here
0
Mike MillerSoftware EngineerAuthor Commented:
Ok, this was kind of inline with what I was trying. I think my problem is that mySelect is populated by other selections made by the user.
So this is what the HTML looks like even when filled with selections:
<select id="mySelect" name="Hour" required="required"></select>

Open in new window


Is there still a way to do this?
0
Julian HansenCommented:
We just move the line that finds the last value of #mySelect inside the event handler like so
  $('#mySelect').change(function() {
	var lastval = $('option:last-child', this).val();
	var firstval = $('#myMins option:eq(1)').val();
    if (this.value == lastval) {
      $('#myMins').val(firstval).prop({disabled: true});
    }
    else {
      $('#myMins').val('').prop({disabled: false});
    }
  });

Open in new window


I have updated the sample and added a button that populates the first drop down dynamically so you can see how it works
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MillerSoftware EngineerAuthor Commented:
Fantastic. Thank you!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.