Question

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

它在控制台中返回undefined

<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结构可以是任何东西，仍然可以找到选择。

获取最接近的选择框的值

3 个答案: