使用 jQuery，选择下一个 <select> 框并更改其值答案

【问题标题】：Using jQuery, selecting the next <select> box and change its value使用 jQuery，选择下一个 <select> 框并更改其值
【发布时间】：2011-08-31 07:24:24
【问题描述】：

根据标题，除了选择正确的框外，我什么都能做。

页面布局基本上是几个链接（class="class"），旁边有一个选择框（选择框和链接之间有一些元素）到每个链接（class="games"）。我正在尝试仅更改正在单击的链接旁边的选择框的值。

* 编辑 *

这里有一个我正在使用的 HTML 更好的例子：http://jsfiddle.net/ynSeZ/9/

---我已经尝试了所有建议的答案，但没有一个有效。感谢您迄今为止所做的所有努力！ ---

这是我到目前为止所拥有的......当我删除最接近的（）部分时，它可以工作......但它会改变每个选择框的值，而不仅仅是最接近链接的方式。

提前致谢，菲尔

【问题讨论】：

你能显示html布局吗？也许在 jsfiddle.net 上举个例子？
@Neal 希望这会有所帮助 - jsfiddle.net/ynSeZ
你想要什么，还不清楚，请把想要的输出写清楚
嗯，我不清楚。请多解释一下，
@Neal - 我更新了小提琴，希望能更好地展示我想要完成的工作。感谢您迄今为止的帮助。

标签： jquery ajax jquery-selectors css-selectors

【解决方案1】：

您应该更改您的 HTML，以便被点击的链接只有一个“兄弟”选择元素。像这样：

...
<div class="container">
    <a href="#" class="class" ... >Value 1</a>
    <a href="#" class="class" ... >Value 2</a>
    <select>
        <option>Foo</option>
        ...
    </select>
</div>

然后在您的 Javascript 中执行此操作以获得正确的选择元素：

$(this).sibling("select")

this 是被点击的链接。

closest 函数有点误导。它找到与给定选择器匹配的元素的最近祖先。

【讨论】：

【解决方案2】：

罢工>

这是你的答案。使用siblings 而不是closest：

$('.class').click(function() {

    var objectID = $(this).attr('objectID');

    $($(this).siblings('.games').get(0)).val(objectID).attr('selected', true);

});

小提琴：http://jsfiddle.net/maniator/ynSeZ/3/

现在想来，上面的答案可能是不正确的。你必须实现一些东西来获得最接近的select 元素。上面的代码所做的是获取页面上的第一个选择元素，不一定是最接近a标签的元素

更新

这是一个基于你最新小提琴的答案：

$('.pick_team').click(function() {

    var objectID = $(this).attr('team_id');

    var select_object = $('select', $(this).parent().parent());

    select_object.val(objectID)
});

小提琴：http://jsfiddle.net/maniator/ynSeZ/12/

【讨论】：

啊...我知道有一个选择器可以做到这一点；但我一辈子都记不住这个名字……叹息。尽情享受+1！ :)
@user628 没问题，只是为了下次提供完整的html，这样我们就可以直接看到问题:-)

【解决方案3】：

也许是这样的？

更新这将抓取同一行中的选择框并将值设置为单击链接的 team_id

$('.pick_team').click(function() {
     var val = $(this).attr('team_id'); // grab the team id - we'll use this to determine the selected option in the select box
    //alert(val); // debugging
    $(this).closest('tr').find('select option[value="'+val+'"]').attr("selected","selected");

});

【讨论】：

@Neal，看起来是这样，我的错

【解决方案4】：

是时候进行一个好的老式 while 循环了：

$('.class').click(function() {
    $next = $(this).next();

    while ($next.prop('tagName') !== 'SELECT' && $next.size() > 0)
    {
        $next = $next.next();
    }

    if ($next.prop('tagName') === 'SELECT')
    {
        $next.val($(this).attr('objectID'));
    }
});

jsFiddle：http://jsfiddle.net/cM4B5/3/

编辑：jsFiddle 中的轻微拼写错误导致第二个链接无法正常工作。已更新。

【讨论】：