2

Web アプリケーションに 2 つのドロップダウン リストがあります。2 つのドロップダウンに入力されたデータは、データベースから取得されます。それらには同じデータが含まれています。

私が望むのは、リストの1つが最初のドロップダウンで選択されている場合、2番目のドロップダウンではもう使用できないはずです。

次のかみそりの構文があります。

@Html.DropDownListFor(model => model.Questions1, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions1", Name = "Questions1"})

@Html.DropDownListFor(model => model.Questions2, (SelectList)ViewData["Questions"], "Select>>", new { id = "Questions2", Name = "Questions2"})

質問は、データベースから取得したモデルからのものです。

前もって感謝します！

4

4 に答える 4

2

これを行うためのよりスマートな方法があるかどうかはわかりませんが、これが私が思いついた方法です。

  1. option要素を複製する
  2. 変更リスナーを追加
  3. ＃2でオプションを再作成します
  4. #1で選択したものを#2から削除
// save all options locally
var options = $("#Question2 option").clone();

function removeItem() {
    // clear and re-populate all options
    $("#Question2 option").remove();
    $("#Question2").append(options);

    // get the selected option in #1 and remove from #2
    var selected = $("#Question1 :selected").val();
    $("#Question2 option[value='" + selected + "']").remove();
}

// update #2 on startup, and on change
$("#Question1").on("change", removeItem);
removeItem();

フィドル

于 2013-07-24T03:02:31.613 に答える
1

これを実現するには、オプションのプールを JavaScript オブジェクトに保存する必要があります。次に、各ドロップダウンの「onchange」イベントで、選択したものを除外して、他のドロップダウンのオプションを再構築します。jQuery を使用した例を次に示します。

// Build a javascript array with all of the select names/values
var options = new Array();
$('#Questions1 option').each(function() {
    $this = $(this);
    options.push({ Name: $this.text(), Value: $this.val() });
});

// Create a function for re-building a select minus the chosen option
var rebuildSelect = function($selOption, $select) {
    $previouslySelected = $select.find(':selected');
    $select.empty();
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];
        if (opt.Value != $selOption.val()) {
            if ($previouslySelected.val() == opt.Value) {
                $select.append('<option value="' + opt.Value + '" selected="selected">' + opt.Name + '</option>');
            }
            else {
                $select.append('<option value="' + opt.Value + '">' + opt.Name + '</option>');
            }
        }
    }
}

// Wire up the event handlers
var $Questions1 = $('#Questions1');
var $Questions2 = $('#Questions2');

$Questions1.change(function() {
    rebuildSelect($(this), $Questions2);
});

$Questions2.change(function() {
    rebuildSelect($(this), $Questions1);
});

// Go ahead and run the function on each box to remove the default entries from the other box
rebuildSelect($Questions1.find(':selected'), $Questions2);
rebuildSelect($Questions2.find(':selected'), $Questions1);

http://jsfiddle.net/n5k99/

于 2013-07-24T03:43:23.607 に答える
0

これは直接的な答えではありませんが、代替案です。

両方のオプションをドロップダウン リストに保持して、ユーザーに同じ項目を選択させ、選択すると「2 つの異なる項目を選択してください」などのメッセージを表示しないのはなぜですか? コードも簡単になるはずです。

私がユーザーで、何らかの理由で同じものを 2 回選択したかった場合、同じものを 2 回選択しようとするよりも、システムがそれを許可し、後で間違っていたことを教えてくれると思います。 2 番目のドロップダウンで必要なアイテムが見つからないので、パニックに陥ります。

于 2013-07-25T03:22:29.333 に答える
0

Jquery関数を使用できます

したがって、ドロップダウンが2つある場合

<select id="dd1" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>



<select id="dd2" style="width:200px;">
              <option value="feedback" name="aft_qst">After Quest</option>
              <option value="feedback" name="aft_exm">After Exam</option>
              </select>

次に、このjQueryを追加するだけです

$("#dd1").change(function(){
        $("#dd2").prop("disabled", true);
});

ここを見てください：http://jsfiddle.net/tft4t/186/

于 2013-07-24T03:17:03.780 に答える