получить значение из динамического раскрывающегося списка jQuery

Question

Я пытаюсь получить значение Option из Dropbox, созданного динамически через Ajax с JQuery, в зависимости от выбора другого Dropbox, но до сих пор нет успеха.

Структура, что у меня есть, как это:

HTML раздаточной 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> 

раздаточной 2:

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

В связи с выбором раздаточных 1 будет результат dropbox 2

Ajax JQuery Выбирается так:

$.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 ..'); 
        } 
       }); 

В момент, когда я пытаюсь получить значения выбранного элемента в dropbox 2, начните мою головную боль. Как это, как я пытался:

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

Но до сих пор тот же ответ: UNDEFINED

Может кто-нибудь помочь мне с моей головной болью?

Answer 1

Как и другие ответы указали, у вас есть опечатка в вашем выборе JQuery, $(#slt2) поскольку они не завернуты в '' или "", что может вызвать проблемы.

Вы также не сообщите нам, где вы запускаете код, чтобы связать событие change, что также может представлять интерес.

В случае, если вы запускаете его до создания выпадающего списка, вы ссылаетесь на элемент, который в данный момент еще не существует. Вы можете привязывать события к нему путем привязки к объекту, который существует во время запуска кода, но связывать его с нужным объектом. См. Скрипку ниже, которая создаст и добавит выпадающее меню через 3 секунды и с привязкой, которая выполняется раньше.

$('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>

Answer 2

Что об этом:

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

Answer 3

$(#slt2) изменить это $('#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>