jQuery get Select option value shows Undefined error

Question

I am generating an Html select in a form that is in a bootstrap 3 modal popup. I am trying to get the selected value and pass it through JQuery to dump to a database.

I have other input fields and a text area field using tinyMCE that I get the value from without any issues at all using $('#id').val();.

My select is super simple and displays in the view source as:

<select id='practitionerID' name='practitionerID' class='form-control'>
    <option value="1">Doctor 1</option>
    <option value="2">Doctor 2</option>
</select>

I am have tried many different ways to get the data to display and cannot for the life of me get the option value.

I have tried the following:

$('#practitionerID').prop('selectedIndex'); // give's me -1 no matter the option selected
$('#practitionerID').val(); // returns null
$('#practitionerID').text(); // returns null, dont want the text anyways
$("#practitionerID option:selected").val(); // returns undefined
$("#practitionerID option:selected" ).text(); //returns undefined, still not what i want.

EDIT: So it tried this and it actually gives me a value now but only ever gives me the first option in the dropdown even though i have chosen something else. $('#practitionerID :selected').val();

The only thing i can think of that is tripping this up is the fact that I am loading it in a modal? Maybe it cannot read into it for some reason to see the property?

When I load an existing record and get the data.event.practitionerID it works gives me the value fine. However, I cannot seem to set the value when i get it though. So it appears to be an issue with the ID of this select but I just cant see where or how.

Any help would be greatly appreciated!

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — ncardeli, Nov 14 '17 at 02:28
Sounds like you are checking before element exists. `val()` never returns `null` or `undefined` when selector is a form control and it exists when called. Returns string (or array if select multiple) — charlietfl, Nov 14 '17 at 02:29
@ncardeli its not really the selected value yet. I am trying to set it based on the value when i select it from the drop down. It is not the same issue as that person as they are looking for the actual "selected" parameter where I wont have that just yet. — jAC, Nov 14 '17 at 18:59
@charlietfl I think you might be on to something there and will check my code when i get home. — jAC, Nov 14 '17 at 19:00

score 2 · Answer 1 · answered Nov 14 '17 at 04:01

Hope this helps....

$( "#select" ).submit(function( event ) {
  var select=$('#practitionerID').val();
  alert( select );
  event.preventDefault();
});

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

<!-- Button to trigger modal -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a>
 
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
         <form id="select">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
          <h4 class="modal-title">Select!</h4>
        </div>
        <div class="modal-body">
       
            <select id='practitionerID' name='practitionerID' class='form-control'>
    <option value="1">Doctor 1</option>
    <option value="2">Doctor 2</option>
</select>
          
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div><!-- /.modal-content -->
    </form>
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
  
</div>
</body>
</html>

so this works stand alone but in my code it does not work. charlietf might be right where it's not loaded yet but not sure how. So the field in the modal is generated by a php script and it is on the screen before I click the "add" button which is just a submit. I am going to play around with a few more things and will update soon. — jAC, Nov 16 '17 at 01:43
for some reason the actual value is always the first one in the drop down. Event though the above code works, in my list it does not seem to care about which one is selected it always gives the value of the first item. Anyone have any thoughts on this? — jAC, Nov 17 '17 at 00:58

score 2 · Accepted Answer · answered Nov 17 '17 at 01:22

I am a complete idiot.

The solution that worked for me was

$('#practitionerID').val();

The issue is I had a quick add feature on the same page and guess what I used, a drop down with the same ID. It was taking the value from the first drop down every time.

I hope this mistake can help someone else.

score 0 · Answer 3 · answered Feb 13 '19 at 22:36

0

I have tried to get selected value by ID. but no luck.

Then I tried to get selected value by select field Name. And I got the desired result.

$("select[name=practitionerID]").val();

answered Feb 13 '19 at 22:36

G_real

1,137
1
18
28

jQuery get Select option value shows Undefined error

3 Answers3