2

1年の各月に1つずつ、合計12のドロップダウン入力領域があります。各ドロップダウンには、同じ24のオプションを選択できます。

たとえば、1月のドロップダウンボックスでオプション＃4を選択した場合、そのオプション＃4は他のどのドロップダウンメニューでも選択できないようにする必要があります。それはまだドロップダウンにありますが、無効になっているだけです。

これには、他のドロップダウンに対して値をチェックし、他のドロップダウンメニューを動的に変更するためのajaxトリガーがあります。

多くのifステートメントを作成せずにこれらの値を動的にチェックして無効にするために実行できるループはありますか？

4

4 に答える 4

4

You can use jQuery to find the option element in all other dropdowns (in my example, designated by a certain class...and can easily be changed to another selector - I thought the selector "select" was too broad), and then disable the actual option element by using .prop("disabled", true). But it's a little more tricky than this, as you need to keep track of the previous selected value to enable the dropdown again when a different value is chosen. Here's an example that will hopefully help:

http://jsfiddle.net/p5Arj/

$(document).ready(function () {
    $(".test").each(function () {
        var $self = $(this);
        $self.data("previous_value", $self.val());
    });

    $(".test").on("change", function () {
        var $self = $(this);
        var prev_value = $self.data("previous_value");
        var cur_value = $self.val();

        $(".test").not($self).find("option").filter(function () {
            return $(this).val() == prev_value;
        }).prop("disabled", false);

        if (cur_value != "") {
            $(".test").not($self).find("option").filter(function () {
                return $(this).val() == cur_value;
            }).prop("disabled", true);

            $self.data("previous_value", cur_value);
        }
    });
});

So this disables all other dropdowns' same options when you choose one, and makes sure that when you choose another, the previous one is enabled in all other dropdowns. For example, choose "3" in the first dropdown...look at the second dropdown - see that "3" is disabled...go back to the first dropdown and choose "1"...look at the second dropdown - see that "3" is enabled again but "1" is disabled. That's what the use of .data is for in my code.

Of course, you can replace the use of value with selectedIndex if you are 100% sure that all of the options will be the same for each select in question.

于 2012-10-31T00:07:23.913 に答える
2

http://jsfiddle.net/Rk5e9/9/

わずか10行程度、しかもajaxなし！

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="unique-value">
    <option value="-1" selected="selected">Default</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>


Script:
$(document).ready(function(){
    $('.unique-value').focus(function(){
        var val = $(this).val();
        $(this).attr('data-current-value', val); 
    });

    $('.unique-value').change(function(){
        var val = $(this).val();
        if(val != -1)
            $('.unique-value option[value=' + val + ']').attr('disabled', 'disabled'); 

        var oldval = $(this).attr('data-current-value');
        $('.unique-value option[value=' + oldval + ']').removeAttr('disabled'); 
    });        
});​
于 2012-10-31T00:26:29.157 に答える
0

これが最短の解決策になると思います：

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

<select class="select-value">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

そしてjqueryコード：

    $(document).on('change', '.select-attendee', function(){
        $current=$(this);
        $(".select-attendee").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
    });
于 2015-05-15T11:07:06.263 に答える
-1

月ごとにドロップダウンがあり、週ごとにオプションがあるとします。

<select class="month" id="october">
  <option class="week" value="week1">Week One</option>
  <option class="week" value="week2">Week Two</option>
</select>

週を選択して、イベントをリッスンするとします。

$(".month").change(function(event) {
   // Get the week just selected.
   var selectedWeek = $(this).children(".week:selected").val();
   // Enabled all weeks before disabling the selected week.
   $("option.week").removeAttr("disabled");
   // Disable all week options matching this selection.
   $("option.week[value="+selectedWeek+"]").attr("disabled", "disabled");
});
于 2012-10-30T23:51:04.523 に答える