动态更改选择值

Question

我需要在选择列表中获取所选选项（如果已更改）的值，并更改选择列表旁边的范围中的文本。问题是我不知道选择列表的ID。页面上有很多不同的选择列表（5-25 +），它们都是动态创建的，所以我不能在.change()中指定id。以下是我有：

的JavaScript：

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

我错过了什么？

Answer 1

尝试是这样的：

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

Answer 2

听起来像是你想使用jQuery的next

Answer 3

试试这个：

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

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

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

}).trigger('change'); 

Answer 4

你可以得到事件回调中使用$(this)变更过的要素。尝试改变线

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

到

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

Answer 5

试试这个：

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

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