jQuery - Executing js function on select of dropdown list

Question

I'm trying to use jQuery to fire off a javascript function whenever the selected option changes in a dropdown list.

The options of this dropdown list (insurance carriers) change each time the form is filled out. Options are populated by an event from a previous form field (onblur when user enters a case number), php is used to query a database and populate the dropdown list with each potential insurance carrier. Different case numbers result in different insurance providers showing up as options in the dropdown list, so the options are never the same each time a user fills this form.

Like stated previously, after the options are populated I'm trying to call another js function when the user selects a different insurance carrier from the dropdown.

On page load, the html for the form dropdown looks like this, simple:

<tr>
    <tr><td><span class="qText" name="insurer">2. Insurer:</span></td></tr>
    <td><select class="qAns" name="insurer_a1">
            <option>Please enter a case number</option>
    </select></td>
</tr>

Once a case number is entered in a previous field, the dropdown populates with however many potential insurance carriers are available for that case.

I tried to use something like this:

<script>
$("#insurer_a1").change(function(){
    getAdjuster1();
});
</script>

I also tried this:

$(function() {
    $("#insurer_a1").change(function() {
        getAdjuster1();
    });
});

Is what I'm trying to do much more difficult than I anticipated, because the dropdown options are not static?

Someone Anonymous · Accepted Answer · 2020-10-01 17:30:31Z

1

There are some problems:

insurer_a1 is not an id, it's a name
In your select tag, right now, you only have one option, so you cannot change it.

In the following code, you print "dropdown changed!" when it is changed.

function getAdjuster1() {
  console.log("dropdown changed!")
}
$("[name=insurer_a1]").change(getAdjuster1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <tr>
    <td><span class="qText" name="insurer">2. Insurer:</span></td>
  </tr>
  <td>
    <select class="qAns" name="insurer_a1">
      <option>Please enter a case number</option>
      <option>Number1</option>
    </select>
  </td>
</tr>

answered Oct 1, 2020 at 17:30

Someone Anonymous

4172 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bigeloj · Accepted Answer · 2020-10-01 17:46:07Z

0

From what you are saying the values in the select list constantly change and you need to grab that value and pass it off to a javascript function. The easiest way that I have found to do this is by using the onchange event. I have rewritten your code below as an example.

<tr>
<tr><td><span class="qText" name="insurer">2. Insurer:</span></td></tr>
<td><select class="qAns" id="insurers" name="insurers" onchange="getAdjuster(this.value)">
        <option value="1">case number 1</option>
        <option value="2">case number 2</option>
</select></td>

Sript Code

<script>
  function getAdjuster(case_number){
     //your code that executes 
    }
</script>

answered Oct 1, 2020 at 17:46

Bigeloj

588 bronze badges

1 Comment

boog Over a year ago

even simpler than that, I don't need to pass anything to the function... just call it...and this works- thank you very much!

Collectives™ on Stack Overflow

jQuery - Executing js function on select of dropdown list

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related