JQuery not capturing dropdown value

Question

I'm making an API interface to schedule package pickup. The API requires the number of packages, etc. My project manager said he needs the number of packages as a drop down list. Now trying to get the package quantity from the form doesn't work, although it works for my other dropdown menus.

My PHP code to generate the dropdown list:

<select name="package_count" id="package_count" class="form-control form-inps">
                                <?php for ($i=1; $i<26; $i++) {
                                    if ($i !== 1) {
                                        echo "<option value='${i}'>${i}</option>";
                                    } else {
                                        echo "<option selected='selected' value='${i}'>${i}</option>";
                                    }
                                } ?>
                            </select>

Code to capture API calls:

info.package_count = $("#package_count").val();

For reference, this is the code I use to generate the customer status dropdown:

<select id="state" name="state" class="form-control form-inps">
                            <?php $customerState = $customer_id->state;
                                foreach ($categories as $abbr=>$full) {
                                if ($abbr !== $customerState && strtolower($full) !== strtolower($customerState)) {
                                    echo "<option value='${abbr}'>${full}</option>";
                                } else {
                                    echo "<option value='${abbr}' selected='selected'>${full}</option>";
                                }
                            }?>
                        </select>

and the code to capture it:

info.state = $("#state").val();

Although the structure looks the same, the country will be caught, but the package quantity will not:

city: 
"REDACTED"
company: 
""
date: 
"2023-03-17"
earliest: 
"13:00"
latest: 
"17:00"
name: 
"REDACTED"
package_count: 
""
shipping_direction: 
undefined
shipping_provider: 
undefined
state: 
"REDACTED"
street: 
"REDACTED"
street2: 
""
zip: 
"REDACTED"

Any ideas why state works but packagecount doesn't?

Answer 1

You are trying to cycle through multiple options and selecting the wrong method

|| echo "${i}";

It is also the final value as the selected default final value

Try this

$("#package_count").change(function(){
 var val= $("#package_count option:selected").val();
  $('#result').html(val);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="package_count" id="package_count" class="form-control form-inps">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>

  </select>
  
  <p id="result" style="color:red;font-size:14px"></p>