jquery - Jquery 下拉选择框

Question

我有一个非常简单的问题，如果我有相同下拉框的集合（行），我如何使用 Jquery 选择单个值？

http://jsfiddle.net/Bw4cr/2/

正如我想返回（风筝）或（22）取决于我点击了哪个下拉菜单。

> 查询

$(document).on('change', 'select[name=options]', function() {
   var selectVal= $(this).siblings('select').val();
    alert(selectVal);
});

HTML

<table>
<thead>
<th>Tie</th> <th>Pie</th><th>Lie</th>
</thead>

<tr>
<td><select class="Member" name="options">
    <option value="1">kite</option>
    <option value="2">flag</option>
    <option value="3">ball</option>
    <option value="4">road</option></td>
    <td>
    <select class="Member" name="options" price="200">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option></td>

    <td>
    <select class="Member" name="options" price="200">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option></td>

    </tr>

    </table>

Answer 1

如果您要获取Text 内容，请使用

$(this).find('option:selected').text();

如果要获取当前值

$(this).val();

代码

$(document).on('change', 'select[name=options]', function() {
    var selectVal= $(this).find('option:selected').text();
    alert(selectVal);
});​

检查小提琴

Answer 2

只是改变 ：

var selectVal= $(this).siblings('select').val();

到

var selectVal= $(this).val();

Answer 3

如果你想展示value房产，那么

$(document).on('change', 'select[name=options]', function() {
   var selectVal = $(this).val();
    alert(selectVal);
});​

如果您想在下拉列表中显示文本，那么 Sushants 的答案是合适的

小提琴 - http://jsfiddle.net/Bw4cr/5/

Answer 4

您可以使用map() 方法<select>从所有标签中获取一系列值，如下所示：

$(document).on('change', 'select[name=options]', function() {
    var selectVal= $(this).parent().siblings().andSelf().find('select').map(function() {
        return $(this).val();
    }).get();
    alert(selectVal);
    // alerts something like "2,1,1"
});​

在这里更新了 jsFiddle 。

Answer 5

其他选择不是siblings更改后的选择，因为它们都在td标签内，所以使用：

$(document).on('change', 'select[name=options]', function() {
    var selectVal=$(this).parent().siblings('td').find('select').map(function() {
       return $(this).val();
    });
 //delete junk
    delete(selectVal.context);
    delete(selectVal.prevObject);
    console.log(selectVal);
});​

但这只会返回其他两个（不仅仅是更改的值），这可能不是您想要的，所以接下来的代码：

$(document).on('change', 'select[name=options]', function() {
//this will return array
    var selectVal=$(this).parents('tr').find('td > select').map(function() {
       //use here alert or whatever you want
       return $(this).val();
    });
    //delete junk
    delete(selectVal.context);
    delete(selectVal.prevObject);
    console.log(selectVal);
});​

我没有使用andSelf()，因为它会改变数组中值的顺序。