동적으로 변경된 선택 값

Question

선택 목록에서 선택한 옵션의 값을 가져오고 선택 목록 옆의 범위에서 텍스트를 변경해야합니다. 문제는 선택 목록의 ID를 모른다는 것입니다. 페이지 (5-25 +)에는 많은 선택 목록이 많이 있으며 모두 동적으로 만들어 지므로 .change()에 지정된 ID를 가질 수 없습니다. 여기에 내가 무엇을 가지고 :

자바 스크립트 :

이

$("select").change(function() { 
    var str = ""; 
    str = $("select option:selected").text(); 

    $(".out").text(str); 
}).trigger('change'); 

(.이 작동하지 않습니다 물론, 각각의 범위에서 선택 모든 값을 넣습니다)

HTML :

<select name="animal[]"> 
    <option value="dog">dog</option> 
    <option value="cat">cat</option> 
    <option value="bird">bird</option> 
    <option value="snake">snake</option> 
</select> 
<span class="out"></span> 

무엇이 누락 되었습니까?

$("select").change(function() { 
    var txt = $(this).val(); 
    $(this).next('span.out').text(txt); 
}).trigger('change');​ 

Answer 1

이런 식으로 뭔가를 시도 : 당신이 jQuery의 next

Answer 2

는 소리 . 이 시도

str = $(this).find("option:selected").text(); 

Answer 3

이 시도 사용할처럼

Answer 4

당신은 이벤트 콜백 내에서 $(this)를 사용하여 변경된 요소를 얻을 수 있습니다 :

$("select").each(function(){ 

    var select = $(this), 
     out = select.next(); 

    select.change(function() { 
     out.text(select.val()); 
    }); 

}).trigger('change'); 

Answer 5

에 선

str = $("select option:selected").text(); 

을 변경해보십시오 :

$("select").change(function() { 
    var str = ""; 
    str = $(this).find(":selected").text(); 

    $(".out").text(str); 
}).trigger('change');