-1

我有 5 个下拉列表，命名为 sample1 到 sample5...每个下拉列表都包含相同的选项列表（使用 ASP 从我的 SQL 填充），但我需要阻止它们提交重复项。所有5个都需要不同。但是，可以接受 0 作为它们中的每一个的值（空白）。

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 示例

下拉列表是相同的，所以也许在选择时从其他 4 个中删除选项会更好？我真的不确定 JavaScript 的功能（我的专长是 ASP 和 SQL）。我应该做一个下拉菜单并将其限制为 5 个 Ctrl+单击选项吗？我也开始尝试这种布局。

单个多个下拉

我不确定我的老板会更喜欢哪个选项。我们现在使用 5 个下拉菜单，但也许另一个会更干净。您是否对人们不了解如何选择多个项目有问题？

你们中的一位 JavaScript 专家可以编写我的 FOSamples 函数来工作吗？OnChange 是要使用的正确 javascript 吗？现在，办公室只需要注意重复并手动删除并替换为其他内容。

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

    }
-->
</script>

马哈洛！

4

2 回答 2

1

快速而肮脏的纯 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，最好使用评论中提到的 widged @btoueg。

于 2013-01-24T00:15:37.273 回答
1

这是使用 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-24T21:52:15.013 回答