动态获取更改的选择值

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

试试这个：

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

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

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

}).trigger('change');

Answer 3

试试这个：

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

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

Answer 4

听起来你想使用jQuery的next

Answer 5

您可以在事件回调中使用$(this)获取更改的元素。尝试更改行

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

到

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