get value from dynamic dropdown jquery

问题

I am trying to get the Option value from a dropbox created dynamically throught Ajax with Jquery, depending of the selection of another dropbox, but till now no success.

The structure that I have is like this:

HTML dropbox 1:

<select id="slt1">
 <option value="" selected>Select</option>
 <?php foreach($prozess as $p): ?>
 <option value="<?php echo $p->Id; ?>"><?php echo $p->Name; ?></option>
 <?php endforeach; ?>
</select>

dropbox 2:

<select id="slt2"></select>

In relation with the selection of dropbox 1 will be the result of dropbox 2

Ajax Jquery Looks like this:

$.ajax({
      data: { id_prozess : $(#slt1).val() },
      url:   'page.php',
      type:  'POST',
      dataType: 'json',
      success:  function (r) {
                $(#slt1).prop('disabled', false);
                $(#slt2).find('option').remove();
                $(r).each(function(i, v){ // indice, valor
                $(#slt2).append('<option value="' + v.id + '">' + v.Name + '</option>');

                 })

                 },
      error: function(){
                        alert('Ocurrio un error en el servidor ..');
                    }
                });

In the Moment when I try to get the values of a selected item in dropbox 2 start my headache. Like this is how I tried:

 $(#slt2).on( "change", function() {
    alert( $("#slt2").val() );
});

But till now the same answer: UNDEFINED

Can somebody help me with my headache?

回答1:

As other answers have pointed out, you have a typo in your jQuery selection, $(#slt2) since they aren't wrapped in '' or "", which might cause you trouble.

Neither are you telling us where you run the code to bind the change event, which also might be of interest.

In the case you are running it before the dropdown has been created, you are referencing an element that at the moment not yet exists. You can bind events to it by binding to an object that exists at the time the code runs, but link it to the desired object. See fiddle below that will create and append a dropdown after 3 seconds, and with a binding that is run before.

$('body').on('change', '#slt2', myFunction);

setTimeout(function() {

  var optionList = ["Volvo", "Saab", "BMW"];
  var dropdown = $("<select></select>").attr("id", "slt2");

  $.each(optionList, function(i, el) {
    dropdown.append("<option>" + el + "</option>");
  });

  $("#dropdown-container").append(dropdown);


}, 3000);

function myFunction() {
  alert($(this).val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dropdown-container">
</div>

回答2:

What about this :

 $(document).on( "change","#slt2", function() {
   alert( $(this).val() );
 });

回答3:

$(#slt2) change this to $('#slt2')

$(document).ready(function(e) {
  $('#slt2').on("change", function() {
    alert($("#slt2").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="slt1">
  <option value="2" selected>Select2</option>
  <option value="1" selected>Select1</option>

</select>



<select id="slt2">
  <option value="2" selected>Select2</option>
  <option value="1" selected>Select1</option>
</select>

来源：https://stackoverflow.com/questions/32199731/get-value-from-dynamic-dropdown-jquery

标签

jquery

ajax