如何將jQuery後繼續選擇追加

Question

玉傢伙，這裏的小提琴 http://jsfiddle.net/wKbXx/24/

$(function() { 
$('input[name=q1]').on('change', function() { 
    var sel = $('[id^="comm"]'), opt = $('<option/>'); 
    if ($(this).is(':checked')) { 
     sel.append($("<option />").val(this.value).text(this.id)); 
    } else { 
     $('option[value=' + this.value + ']').remove(); 
    } 
}); 
}); 

我需要做的是選擇與複選框兩種顏色。比如說紅色和藍色。然後使用選擇，標記一個紅色和一個藍色。然後檢查綠色。我希望它保留選定的數據。現在，一旦你選擇綠色，它就會抹掉這些數據。我怎樣才能做到這一點？

更新，以反映WORKING答案..已更新FIDDLE TOO

Answer 1

我會去稍微不同的方法;而不是總是重置選擇框，我會檢查更改的複選框中的文本是否已包含在選擇框中。如果是這樣，我會假定它沒有被選中，並從選擇框中刪除選項。否則，我會將這個新選項附加到選擇框。

$(function() { 
    $('input[name=q1]').on('change', function() { 
     var sel = $('[id^="comm"]'), opt = $('<option/>'); 
     if (sel.find('option').text().indexOf(this.id) > 0) { 
      $('option[value=' + this.value + ']').remove(); 
     } else { 
      sel.append($("<option />").val(this.value).text(this.id)); 
     } 
    }); 
}); 

這個版本的缺點是，選擇框中的顏色順序是由點擊複選框的順序決定的;在您的版本中，選擇框中的顏色順序始終與複選框中的顏色順序相同。

（。希望是有道理的）

這裏有一個小提琴：http://jsfiddle.net/Niffler/0hLxzvh8/

Answer 2

這可能是回答你的問題...... 你應該把你在上面重寫爲好。

$(function() { 
    var sel = $('[id^="comm"]'), opt = $('<option/>'); 
    sel.html(opt.clone().text('[Select One]')); 

    $('input[name=q1]').on('change', function() { 

     if ($(this).is(':checked')) { 
      sel.append($("<option />").val(this.value).text(this.id)); 
     } 
     else { 
      //Remove where ID matches up 
      sel.children().remove(); 
     } 

     if(sel.find('option').length > 1) { 
      if(sel.find('option').length === 2) { 
       sel.find('option').eq(1).attr('selected',true); 
      } 
     } 
    }); 
}); 

乾杯！

Answer 3

在替換選項之前，您需要獲取選擇框的值，然後在最後重置該值。

$(function() { 
$('input[name=q1]').on('change', function() { 
    var sel = $('[id^="comm"]'), opt = $('<option/>'); 

    sel.each(function(){ 
     sel.data('previous', sel.val()); 
    }); 

    // overwrite the existing options 
    sel.html(opt.clone().text('[Select One]')); 
    $('input[name=q1]:checked').each(function() { 
     sel.append($("<option />").val(this.value).text(this.id)); 
    }); 

    // if it had a value, set it back to that. 
    if (currentValue != ''){ 
     sel.each(function(){ 
      sel.val(sel.data('previous')); 
     }); 
    } else { 
     if(sel.find('option').length > 1) { 
      if(sel.find('option').length === 2) { 
       sel.find('option').eq(1).attr('selected',true); 
      } 
     } 
    } 
}); 
});