Question

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

因为我希望返回（风筝）或（22），具体取决于我点击的下拉列表。

＆GT; Jquery的

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

如果您希望获得文字内容，请使用

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

如果您想获得当前值

$(this).val();

<强>代码

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

<强> check fiddle

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() method从所有<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 here。

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()，因为它会改变数组中值的顺序。

Jquery下拉选择框

5 个答案: