How to get Id option selected on modal show using JS?

Question

I tried to get the ID on the option selected when the modal was in show state.

$("#modal-form").on('shown.bs.modal', function(e) {
  console.log("CHANGE");
  var id = $("#customer option:selected").val();
  console.log(id);
});

<div class="form-group">
  <label for="customer" class="col-md-2 control-label">Customer</label>
  <div class="col-md-9">
    <select class="form-control" id="customer" name="customer" class="form-control">
      <option value="John">John</option>
      <option value="Alex">Alex</option>
    </select>
    <span class="help-block with-errors"> </span>
  </div>
</div>

You have reply when someone answer to your question, whether it is working or not, they spending time for you — jvk, Aug 19 '18 at 04:29
https://stackoverflow.com/questions/8978328/get-the-value-of-a-dropdown-in-jquery — Ramesh, Aug 19 '18 at 04:39
Hi @indra dana, there is no selected option in you code, how it works, you have select any one option and check it — jvk, Aug 19 '18 at 04:39
@indradana does this line `console.log("CHANGE");` works? Make sure your event is called — Ramesh, Aug 19 '18 at 04:46

Ramesh · Answer 1 · 2018-08-19T04:55:54.033

Try the following code. Find the element from the parent,

$(document).on('shown.bs.modal', '#modal-form', function() {
  console.log("CHANGE");
  //var id = $("#customer>option:selected").val();
  var id = $('#customer').find(":selected").val();
  alert(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="customer" class="col-md-2 control-label">Customer</label>
  <div class="col-md-9">
  <form id="modal-form">
    <select class="form-control" id="customer" name="customer" class="form-control">
      <option value="John">John</option>
      <option value="Alex">Alex</option>
    </select>
    </form>
    <span class="help-block with-errors" </span>
  </div>
</div>

@indradana If you are using the same value for `value` and `text`, possibly you can use `text()`. like this `var id = $('#customer').find(":selected").text();`.This is the best way so far I've known — Ramesh, Aug 19 '18 at 04:38

Anshuman · Answer 2 · 2018-08-19T04:45:27.037

0

Hope this will be helpful.

$("#customer").change(function(e) {
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="customer" class="col-md-2 control-label">Customer</label>
  <div class="col-md-9">
    <select class="form-control" id="customer" name="customer" class="form-control">
      <option value="John">John</option>
      <option value="Alex">Alex</option>
    </select>
    <span class="help-block with-errors" </span>
  </div>
</div>

edited Aug 19 '18 at 04:45

answered Aug 19 '18 at 04:40

Anshuman

758
7
23

Try to use the same event called instead of the `change` event – Ramesh Aug 19 '18 at 04:44
@iNullPointer this code on change event I try to get the selected id directly when the modal appears – Mack Zohn Aug 19 '18 at 04:52

score 0 · Answer 3 · edited Aug 19 '18 at 04:45

I find out you have not selected any option and you are checking for select option, select any one option and check it out.

$("#modal-form").on('shown.bs.modal', function(e) {
  console.log("CHANGE");
  var id = $("#customer option:selected").val();
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="customer" class="col-md-2 control-label">Customer</label>
  <div class="col-md-9">
    <select class="form-control" id="customer" name="customer" class="form-control">
      <option value="John" selected>John</option>
      <option value="Alex">Alex</option>
    </select>
    <span class="help-block with-errors"> </span>
  </div>
</div>

this code now work @Krishna Jonnalagadda I try to get the selected id directly when the modal appears — Mack Zohn, Aug 19 '18 at 04:51

How to get Id option selected on modal show using JS?

3 Answers3