使用jQuery，選擇下一個<select>框並更改其值

根據標題，除了選擇正確的框之外，我能夠做所有事情。使用jQuery，選擇下一個<select>框並更改其值

頁面佈局基本上是幾個鏈接（class =「class」），每個鏈接（class =「games」）的下一個選擇框（在選擇框和鏈接之間有一些元素）。我正在嘗試僅改變正在單擊的鏈接旁邊的選擇框的值。

*編輯*

這裏與我使用的HTML的一個更好的例子小提琴：http://jsfiddle.net/ynSeZ/9/

---我已經嘗試了所有建議的答案，沒有工作過。感謝迄今爲止的所有努力！ ---

這是我到目前爲止..當我刪除最接近的（）部分，它的工作..但它改變了每個選擇框的值，而不是隻有最接近鏈接的方式。

在此先感謝，菲爾

來源

2011-05-23 psarid

你能顯示html佈局嗎？並可能在jsfiddle.net上舉一個例子？ – Neal 2011-05-23 16:37:06

@Neal希望這有助於 - http://jsfiddle.net/ynSeZ/ – psarid 2011-05-23 16:52:59

你想要什麼，仍然不清楚，請寫清楚所需的輸出 – diEcho 2011-05-23 16:56:53

這是您的答案。使用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標籤

UPDATE

這是基於把你最新的提琴一個答案：

$('.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/

來源

2011-05-23 16:56:08 Neal

Augh ...我知道*有一個選擇器那樣做;但我不能，爲了我的生活，記住這個名字......感嘆。有一個豐盛的** + 1 **！ :) – 2011-05-23 17:02:09

@大衛看到我的更新 – Neal 2011-05-23 17:15:01

這就是解決方案！非常感謝你的幫助！！ – psarid 2011-05-23 17:45:10

你應該改變你的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是一種誤導。它找到與給定選擇器匹配的元素的最接近的祖先。

來源

2011-05-23 16:55:38

也許這樣的事情？

修訂這將抓住選擇框在同一行並將其值設置爲被點擊鏈接

$('.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"); 

});

來源

2011-05-23 17:08:37 htmlr

這不會工作的所有 – Neal 2011-05-23 17:15:22

我試過這個，它沒有工作。 – psarid 2011-05-23 17:21:58

@Neal，這似乎是，我的壞 – htmlr 2011-05-23 17:37:10

時間有一個良好的，老式的while循環TEAM_ID：

$('.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阻止了第二個鏈接的工作。更新。

來源

2011-05-23 17:38:06

使用jQuery，選擇下一個<select>框並更改其值

回答

相關問題