使用JavaScript在下拉菜單中防止重複選擇

-1

我有5個下拉菜單，名爲sample1到sample5 ...每個下拉列表包含相同的選項列表（從我的SQL使用ASP填充），但我需要阻止他們提交重複項。所有5個需要不同。然而，0是可接受的，作爲它們每個的值（空白）。當選擇將是更好使用JavaScript在下拉菜單中防止重複選擇

FREE Sample Choice 1: <select name="sample1" onChange="JavaScript:FOSamples()"> 
<option value="0"></option> 
<option value="FOABSOLUTETULIP">Fragrance Oil: Absolute Tulip BBW Type</option> 
<option value="FOAFRICANMUSK">Fragrance Oil: African Musk</option> 
<option value="FOALMOND">Fragrance Oil: Almond</option> 
<option value="FOAMAR">Fragrance Oil: Amaretto</option> 
<option value="FOAMBER">Fragrance Oil: Amber</option> 
<option value="FOAMBERROM">Fragrance Oil: Amber Romance Victoria's Secret Type</option> 
<option value="FOANAIS">Fragrance Oil: Anais Anais Type</option> 
<option value="FOANGEL">Fragrance Oil: Angel Type</option> 
<option value="FOAPPLEBLOS">Fragrance Oil: Apple Blossoms</option> 
<option value="FOAPPLEJACK">Fragrance Oil: Apple Jack & Peel</option> 
<option value="FOAPPLESP">Fragrance Oil: Apple Spice</option> 
<option value="FOAPPLEOAK">Fragrance Oil: Apples & Oak</option> 
<option value="FOAPRICOT">Fragrance Oil: Apricot</option> 
<option value="FOAPRICOTPEAR">Fragrance Oil: Apricot & Pear Yankee Type</option> 
<option value="FOAPRCREME">Fragrance Oil: Apricot Creme</option> 
<option value="FOAQUAREEF">Fragrance Oil: Aqua Reef Old Spice Type</option> 
<option value="FOARABIANMUSK">Fragrance Oil: Arabian Musk</option> 
<option value="FOASIANPEAR">Fragrance Oil: Asian Pear</option> 
<option value="FOASIANPLUM">Fragrance Oil: Asian Plum Blossom</option> 
<option value="FOAUTUMNWOODS">Fragrance Oil: Autumn Woods</option> 
</select><br> 
FREE Sample Choice 2: <select name="sample2" onChange="JavaScript:FOSamples()"> 

<option value="0"></option> 
<option value="FOABSOLUTETULIP">Fragrance Oil: Absolute Tulip BBW Type</option> 
<option value="FOAFRICANMUSK">Fragrance Oil: African Musk</option> 
<option value="FOALMOND">Fragrance Oil: Almond</option> 
<option value="FOAMAR">Fragrance Oil: Amaretto</option> 
<option value="FOAMBER">Fragrance Oil: Amber</option> 
<option value="FOAMBERROM">Fragrance Oil: Amber Romance Victoria's Secret Type</option> 
<option value="FOANAIS">Fragrance Oil: Anais Anais Type</option> 
<option value="FOANGEL">Fragrance Oil: Angel Type</option> 
<option value="FOAPPLEBLOS">Fragrance Oil: Apple Blossoms</option> 
<option value="FOAPPLEJACK">Fragrance Oil: Apple Jack & Peel</option> 
<option value="FOAPPLESP">Fragrance Oil: Apple Spice</option> 
<option value="FOAPPLEOAK">Fragrance Oil: Apples & Oak</option> 
<option value="FOAPRICOT">Fragrance Oil: Apricot</option> 
<option value="FOAPRICOTPEAR">Fragrance Oil: Apricot & Pear Yankee Type</option> 
<option value="FOAPRCREME">Fragrance Oil: Apricot Creme</option> 
<option value="FOAQUAREEF">Fragrance Oil: Aqua Reef Old Spice Type</option> 
<option value="FOARABIANMUSK">Fragrance Oil: Arabian Musk</option> 
<option value="FOASIANPEAR">Fragrance Oil: Asian Pear</option> 
<option value="FOASIANPLUM">Fragrance Oil: Asian Plum Blossom</option> 
<option value="FOAUTUMNWOODS">Fragrance Oil: Autumn Woods</option> 
</select><br> 

FREE Sample Choice 3: <select name="sample3" onChange="JavaScript:FOSamples()"> 
<option value="0"></option> 
<option value="FOABSOLUTETULIP">Fragrance Oil: Absolute Tulip BBW Type</option> 
<option value="FOAFRICANMUSK">Fragrance Oil: African Musk</option> 
<option value="FOALMOND">Fragrance Oil: Almond</option> 
<option value="FOAMAR">Fragrance Oil: Amaretto</option> 
<option value="FOAMBER">Fragrance Oil: Amber</option> 
<option value="FOAMBERROM">Fragrance Oil: Amber Romance Victoria's Secret Type</option> 
<option value="FOANAIS">Fragrance Oil: Anais Anais Type</option> 
<option value="FOANGEL">Fragrance Oil: Angel Type</option> 
<option value="FOAPPLEBLOS">Fragrance Oil: Apple Blossoms</option> 
<option value="FOAPPLEJACK">Fragrance Oil: Apple Jack & Peel</option> 
<option value="FOAPPLESP">Fragrance Oil: Apple Spice</option> 
<option value="FOAPPLEOAK">Fragrance Oil: Apples & Oak</option> 
<option value="FOAPRICOT">Fragrance Oil: Apricot</option> 
<option value="FOAPRICOTPEAR">Fragrance Oil: Apricot & Pear Yankee Type</option> 
<option value="FOAPRCREME">Fragrance Oil: Apricot Creme</option> 
<option value="FOAQUAREEF">Fragrance Oil: Aqua Reef Old Spice Type</option> 
<option value="FOARABIANMUSK">Fragrance Oil: Arabian Musk</option> 
<option value="FOASIANPEAR">Fragrance Oil: Asian Pear</option> 
<option value="FOASIANPLUM">Fragrance Oil: Asian Plum Blossom</option> 
<option value="FOAUTUMNWOODS">Fragrance Oil: Autumn Woods</option> 
</select><br> 

FREE Sample Choice 4: <select name="sample4" onChange="JavaScript:FOSamples()"> 
<option value="0"></option> 
<option value="FOABSOLUTETULIP">Fragrance Oil: Absolute Tulip BBW Type</option> 
<option value="FOAFRICANMUSK">Fragrance Oil: African Musk</option> 
<option value="FOALMOND">Fragrance Oil: Almond</option> 
<option value="FOAMAR">Fragrance Oil: Amaretto</option> 
<option value="FOAMBER">Fragrance Oil: Amber</option> 
<option value="FOAMBERROM">Fragrance Oil: Amber Romance Victoria's Secret Type</option> 
<option value="FOANAIS">Fragrance Oil: Anais Anais Type</option> 
<option value="FOANGEL">Fragrance Oil: Angel Type</option> 
<option value="FOAPPLEBLOS">Fragrance Oil: Apple Blossoms</option> 
<option value="FOAPPLEJACK">Fragrance Oil: Apple Jack & Peel</option> 
<option value="FOAPPLESP">Fragrance Oil: Apple Spice</option> 
<option value="FOAPPLEOAK">Fragrance Oil: Apples & Oak</option> 
<option value="FOAPRICOT">Fragrance Oil: Apricot</option> 
<option value="FOAPRICOTPEAR">Fragrance Oil: Apricot & Pear Yankee Type</option> 
<option value="FOAPRCREME">Fragrance Oil: Apricot Creme</option> 
<option value="FOAQUAREEF">Fragrance Oil: Aqua Reef Old Spice Type</option> 
<option value="FOARABIANMUSK">Fragrance Oil: Arabian Musk</option> 
<option value="FOASIANPEAR">Fragrance Oil: Asian Pear</option> 
<option value="FOASIANPLUM">Fragrance Oil: Asian Plum Blossom</option> 
<option value="FOAUTUMNWOODS">Fragrance Oil: Autumn Woods</option> 
</select><br> 

FREE Sample Choice 5: <select name="sample5" onChange="JavaScript:FOSamples()"> 
<option value="0"></option> 
<option value="FOABSOLUTETULIP">Fragrance Oil: Absolute Tulip BBW Type</option> 
<option value="FOAFRICANMUSK">Fragrance Oil: African Musk</option> 
<option value="FOALMOND">Fragrance Oil: Almond</option> 
<option value="FOAMAR">Fragrance Oil: Amaretto</option> 
<option value="FOAMBER">Fragrance Oil: Amber</option> 
<option value="FOAMBERROM">Fragrance Oil: Amber Romance Victoria's Secret Type</option> 
<option value="FOANAIS">Fragrance Oil: Anais Anais Type</option> 
<option value="FOANGEL">Fragrance Oil: Angel Type</option> 
<option value="FOAPPLEBLOS">Fragrance Oil: Apple Blossoms</option> 
<option value="FOAPPLEJACK">Fragrance Oil: Apple Jack & Peel</option> 
<option value="FOAPPLESP">Fragrance Oil: Apple Spice</option> 
<option value="FOAPPLEOAK">Fragrance Oil: Apples & Oak</option> 
<option value="FOAPRICOT">Fragrance Oil: Apricot</option> 
<option value="FOAPRICOTPEAR">Fragrance Oil: Apricot & Pear Yankee Type</option> 
<option value="FOAPRCREME">Fragrance Oil: Apricot Creme</option> 
<option value="FOAQUAREEF">Fragrance Oil: Aqua Reef Old Spice Type</option> 
<option value="FOARABIANMUSK">Fragrance Oil: Arabian Musk</option> 
<option value="FOASIANPEAR">Fragrance Oil: Asian Pear</option> 
<option value="FOASIANPLUM">Fragrance Oil: Asian Plum Blossom</option> 
<option value="FOAUTUMNWOODS">Fragrance Oil: Autumn Woods</option> 
</select><br>

5 Dropdowns Fiddle Sample

的下拉列表是相同的，所以也許去除來自其他4的選項？我真的不確定JavaScript的功能（我的專長是ASP和SQL）。我應該做一個下拉並將其限制爲5個Ctrl +點擊選擇？我繼續前進，並開始了這種佈局的小提琴。

Single Multiple Dropdown

我不知道我的老闆會選擇哪一種方法。我們現在使用5個下拉列表，但也許另一個會更乾淨。你有沒有理解如何選擇多項目的人有問題？

你們其中的一位JavaScript專家可以寫我的FOSamples函數嗎？ OnChange是否使用正確的JavaScript？現在，辦公室只需要觀察重複項目並手動刪除並替換其他項目。

<script type="text/javascript"> 
<!-- 
    function FOSamples() { 

    } 
--> 
</script>

Mahalo！

來源

2013-01-23 Kateriana

我個人喜歡這個jQuery插件http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#selectedlist –

是的，使用單個多個下拉菜單。您仍然可以逐步增強它，例如與[選擇]（http://harvesthq.github.com/chosen/） – Bergi

快速和骯髒的純JS實現：http://jsfiddle.net/nDGu8/8/

var old_values = {}; // memorize old value of select before it was changed 

// to be called with an event listener, i.e. this refers to the changed <select> 
function FOSamples() { 
    if (old_values[this.name]) { // if there were options disabled, re-enable them 
     // find all <options value=OLD_VALUE> 
     var s = document.querySelectorAll('option[value="' + old_values[this.name] + '"]'); 
     [].forEach.call(s, function (option) { 
      option.disabled = false; 
     }); 
    } 
    // find all <options value=NEW_VALUE> 
    var s = document.querySelectorAll('option[value="' + this.value + '"]'); 
    [].forEach.call(s, function (option) { 
     if (option.parentNode !== this) { 
      // if it is not the <select> the user has just changed, disable the <option> 
      option.disabled = true; 
     } 
    }, this); 
    // memorize value 
    old_values[this.name] = this.value; 
}

整個執行會更容易使用JQuery來實現。如果你考慮使用JQuery，最好使用評論中提到的widgets @btoueg。

來源

2013-01-24 00:15:37 kay

我從來沒有與JQuery合作過，你們能解釋它們之間的區別嗎？凱，這是爲5個下拉或一個，多？ – Kateriana

這裏是如何與jQuery和多選控件做到這一點：http://jsfiddle.net/YQZw8/2

$(function(){ 
    // make sure no option is selected by default 
    $("select").prop("selectedIndex", -1); 
    // add "multiple select" widget, and set max options to 5 
    $("select").multiselect({ 
     click: function(e){ 
     if($(this).multiselect("widget").find("input:checked").length > 5){ 
      return false; 
     } 
     } 
    }); 
});

你需要包含一些JavaScript和CSS雖然。

來源

2013-01-24 21:52:15

使用JavaScript在下拉菜單中防止重複選擇

回答

相關問題