2010-06-07 73 views
0

這似乎是一個奇怪的要求,但我想使用jQuery的可選工具一次只能選擇一個項目,我想它告訴我的值我有每個標籤內。至少我想要那個選擇的內容。有沒有人試圖做到這一點?由於某些原因,這些小東西似乎並不容易在它們的API中找到。jQuery可選擇只選擇1並獲得一個值?

+0

您的問題不對我來說似乎很清楚,你可以用一個例子來具體說明。你總是可以使用jQuery:eq(n)選擇標準來縮小選擇範圍。 – 2010-06-07 13:20:47

+0

不,不是,我不是在談論我選擇使用selectable的選擇器 - http://jqueryui.com/demos/selectable/#option-filter。我想用這個,但是,由於某種原因,我無法弄清楚如何強制只有一個選擇的時間和所選擇的標籤 – jphenow 2010-06-07 13:22:44

回答

0

如果您一次只需要一個選擇,那麼爲什麼選擇可選?

,我覺得你只是使用jQuery,因爲它應該是很容易的。或者我錯過了你的觀點?

活生生的例子:http://jsfiddle.net/F7fsx/

HTML

<div id='container'> 
    <div id='one'>one</div> 
    <div id='two'>two</div> 
    <div id='three'>three</div> 
</div> 
​ 

CSS

#container div { 
    width: 50px; 
    height: 50px; 
    border: 2px dashed red; 
    margin: 10px; 
    color: white; 
    background:orange; 
} 
​ 

jQuery的

$('#container div').click(function() { 
    $th = $(this); 
    $th.css('backgroundColor','yellow'); 
    var value = $th.text() 
    alert(value); 
});​ 
+0

哈啊我現在不知道爲什麼我沒有真正做到這一點。我會在下面給你一個答案或者答案,看看我更喜歡哪一個。謝謝! 等待將$ th.text工作,如果我從asp代碼隱藏插入選定的部分?我認爲這就是爲什麼當我現在嘗試獲得價值時,它看起來像亂碼 – jphenow 2010-06-07 13:34:25

+0

@jphenow - '$ th.text()'只是獲取被點擊元素的文本內容。它假定您正在點擊現有內容的現有元素。無論它來自哪裏都不重要。只是一個通用的例子,因爲我不知道你的具體情況。試試我發佈的實例。 – user113716 2010-06-07 13:38:01

+0

@jphenow - 如果您的意思是動態添加元素,您需要使用'live(...)'而不是'click(...)',如$('#container div')。生活(「點擊」,函數(){...' – user113716 2010-06-07 13:40:55

0

jQuery Forum一個帖子提供了下面的代碼,以限制選擇單個項目:

$("li").live("click", function(event) { 
    $(this).siblings().removeClass("selected"); 
    $(this).addClass("selected"); 
}); 

至於提取數據,這裏是jQuery的UI團隊使用的Serialize Demo代碼,解壓從每個選擇的元素數據:

$("#selectable").selectable({ 
     stop: function(){ 
      var result = $("#select-result").empty(); 
      $(".ui-selected", this).each(function(){ 
       var index = $("#selectable li").index(this); 
       result.append(" #" + (index + 1)); 
      }); 
     } 
    }); 

而且HTML標記是:

<ol id="selectable"> 
<li class="ui-widget-content">Item 1</li> 
<li class="ui-widget-content">Item 2</li> 
<li class="ui-widget-content">Item 3</li> 
<li class="ui-widget-content">Item 4</li> 
<li class="ui-widget-content">Item 5</li> 
<li class="ui-widget-content">Item 6</li> 
</ol> 
+0

這真棒感謝得到的值,我給一個鏡頭 – jphenow 2010-06-07 13:32:31