2012-07-05 45 views
0

所有, 我有以下選擇框:確定值是否在另一個選擇字段已經選定

<select class="event_selection" name="Event[]" id="Event_<?php echo $i; ?>" > 
    <option value="original">Select Event...</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

我有一對夫婦的我的這些形式。當用戶從下拉列表中選擇一個值時,我想確保在另一個具有相同類的選擇中尚未選擇該值。

有沒有簡單的方法來做到這一點?如果是這樣,請你指點我正確的方向?

謝謝!

+1

註冊一個'改變'選擇ta上的事件gs,當選擇一個選項時,將其從其他下拉列表中刪除。根據需要還原以前刪除的選項。 「disabled」屬性應該很好地工作。 – TheZ 2012-07-05 21:59:36

+0

「*當用戶從下拉列表中選擇一個值時,我想確保該值沒有在另一個具有相同類別的選擇上被選中。*」。如果它是? – 2012-07-05 22:03:28

+0

@ŠimeVidas如果它已經被選中,我想只給一個div寫一個小小的警告,說他們已經在之前的選擇中選擇了這個值。 – user1048676 2012-07-05 22:08:25

回答

1

我做了它,這樣就可以不選擇任何值的兩倍:

var $coll = $('.event_selection').on('change', function() { 
    $coll.children().prop('disabled', false); 
    $coll.each(function() { 
     var val = this.value; 
     if (val === 'original') return; 
     $coll.not(this).children('[value="' + val + '"]').prop('disabled', true); 
    }); 
}); 

現場演示:http://jsfiddle.net/QVbQ6/2/


var $coll = $('.event_selection'); 

$('#timeline_table').on('change', '.event_selection', function() { 

    // my code 
    $coll.children().prop('disabled', false); 
    $coll.each(function() { 
     var val = this.value; 
     if (val === 'original') return; 
     $coll.not(this).children('[value="' + val + '"]').prop('disabled', true); 
    }); 

    // your other code... 

}); 
+0

謝謝,我喜歡這個解決方案。我已經有了一個這樣的功能,我不知道如何將您的解決方案併入我現有的功能。我怎麼能更新我目前的功能來做到這一點?我使用的是jQuery而不是$,因爲我使用的是wordpress(僅供參考)。我創建了一個JS小提琴,它已經有了我的初始解決方案:http://jsfiddle.net/VxgmB/1/ – user1048676 2012-07-05 22:16:57

+0

@ user1048676順便說一句,你不必使用'jQuery'而不是''''。只需在準備處理程序中傳遞'$'變量:'jQuery(function($){your_code;});' – 2012-07-05 22:25:13

+0

@ user1048676首先將包含所有這些SELECT框的jQuery對象保存到一個變量中:'var $ coll = $ ('.event_selection');'。一旦你這樣做了,你幾乎可以將我的答案中的函數體複製粘貼到你的「更改」處理程序中(例如在開始時)。 – 2012-07-05 22:30:13

1
$("select.event_selection").change(function(){ 
    if ($(this).val() == $("select.event_selection").not(this).val()) { 
     // match found 
     alert('You have already selected this value'); 
     $(this).val('original'); //sets this back to original   
    } 
}); 
+0

謝謝,但它不是我想要比較的每個選擇。我只想比較一下,看看它是否已經選擇了一個具有event_selection類的選擇 – user1048676 2012-07-05 22:10:21

0
$(".event_selection").change(function(){ 
if($(".event_selection:selected[value=" + $(this).val() + "]").length > 1) { 
    // there are more than one select with this class and same value, do whatever you need 
} 
}); 
相關問題