获取最近选择框的值

Question

当用户单击最近的选择框旁边的链接时，尝试获取该框的值。

它在控制台中返回未定义

http://jsfiddle.net/vkaCB/

<select name="songSelection_amclaughlin" class="songSelection_input">
    <option value="">SELECT ITEM</option>
    <option value="value 1">value 1</option>
    <option value="value 2">value 2</option>
    <option value="value 3">value 3</option>
</select> 
<span class="vote-btns">
    <a href="#" class="button fb grey">Vote</a>
    <a href="#" class="button tw grey">Vote</a>
</span>

//js

$(document).ready(function() {  
    $("a.button").click(function(event) {
        console.log($(this).closest('select').val());
    });
});

Answer 1

select不是锚点的父级，closest()仅针对父级，并查找与选择器匹配的最接近的父级。

$(this).closest('span').prev('select').val()

您可能想要的是找到最近的跨度，然后上一个选择

Answer 2

  $(document).ready(function() {  
    $("a.button").click(function(event) {
     console.log($(this)
       .parents('.vote-btns')
       .prev('select')
       .find('option[selected]').attr('value'));
    });
});

或

  $(document).ready(function() {  
    $("a.button").click(function(event) {
     console.log($(this)
       .parents('.vote-btns')
       .prev('select')
       .value());
    });
});

Answer 3

基于DOM结构选择元素是一种非常脆弱的策略——对DOM的任何更改都会导致代码失败。控件有一个名称，为什么不使用它呢？

$('select[name=songSelection_amclaughlin]').val();

或不带jQuery:

document.querySelector('select[name=songSelection_amclaughlin]').value;

如有必要，还可以将类添加到选择器中。现在DOM结构可以是任何东西，并且仍然可以找到select。