-1

sample1 から sample5 までの名前の 5 つのドロップダウンがあります...各ドロップダウンには同じ選択肢のリスト (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 ドロップダウン フィドル サンプル

ドロップダウンは同じなので、選択したときに他の 4 つのオプションを削除した方がよいでしょうか? JavaScript の機能についてはよくわかりません (私の専門は ASP と SQL です)。1 つのドロップダウンを実行して、5 つの Ctrl+クリック選択に制限する必要がありますか? 私は先に進み、このレイアウトでもフィドルを開始しました。

単一の複数のドロップダウン

上司がどちらのオプションを好むかわかりません。現在は 5 つのドロップダウンを使用していますが、他のドロップダウンの方がきれいかもしれません。複数のアイテムを選択する方法を理解していない人々に問題がありますか?

JavaScript の専門家の 1 人が、私の 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 に答える