禁用从 2 个下拉列表中选择的选项 ||切换选项

Question

我有 2 个下拉菜单

当下拉 1 选项被选中时，它应该禁用下拉 2 选项，这样您就无法选择它

这是我的代码

                    <div class="form-group">
                        <label for="from_account">From Account:</label>
                        <select class="form-control" name="from_account" id="selectBox1" onchange="checkvalue1()">
                            <option disabled selected>Transfer From Account</option>
                            @foreach($accounts as $account)
                                <option value="{{$account->id}}">{{$account->account_number}} {{$account->account_name}} R{{$account->current_balance}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="to_account">To Account:</label>
                        <select class="form-control" name="to_account" id="selectBox2" onchange="checkvalue2()">
                            <option disabled selected>Transfer To Account</option>
                            @foreach($accounts as $account)
                                <option value="{{$account->id}}">{{$account->account_number}} {{$account->account_name}} R{{$account->current_balance}}</option>
                            @endforeach
                        </select>
                    </div>

这是我的 JS

      function checkvalue1(){
        $("#selectBox2 option").each(function(){
            if($("#selectBox1 option:selected").val() == $(this).val())
                $(this).attr("disabled", "disabled");
            else
                $(this).removeAttr("disabled");
        });
    }

    function checkvalue2(){
        $("#selectBox1 option").each(function(){
            if($("#selectBox2 option:selected").val() == $(this).val())
                $(this).attr("disabled", "disabled");
            else
                $(this).removeAttr("disabled");
        });
    }

我让它以一种奇怪的方式工作，它有点错误，我需要帮助！

让我解释一下

如果我选择下拉菜单 1，它会禁用下拉菜单 2 中的选项，但它也允许我选择我从一开始就禁用的选项。

这应该默认禁用而不是更改

然后我需要它有点像切换，所以如果我选择帐户 1，例如它应该在它们之间切换，因为现在我必须选择其他内容或刷新页面，然后我才能单击另一个选项来选择我希望它使sense

Answer 1

在函数 checkvalue1 和 checkvalue2 中，否则条件应该是这样的：

if($(this).val() != ''){
  $(this).removeAttr("disabled");
}

所以最终的功能应该是：

function checkvalue1(){
        $("#selectBox2 option").each(function(){
            if($("#selectBox1 option:selected").val() == $(this).val())
                $(this).attr("disabled", "disabled");
            else
                if($(this).val() != ''){
                   $(this).removeAttr("disabled");
                }
        });

Answer 2

我不能 100% 确定我理解正确，因此以下内容可能不是您试图描述的内容。

基本上第二个下拉菜单最初被禁用，直到第一个下拉菜单做出选择。一旦做出该选择，第二个下拉菜单就会启用，但是从同一个帐户转帐到同一个帐户是没有意义的，所以如果在第二个下拉菜单中选择的值相同，那么我们禁用第一个下拉菜单。这两种方式都有效 - 基本上 other 下拉菜单将被禁用...??

我稍微修改了 HTML，将 select 放在 label 中，并删除了 ID 和 for 属性以使标记更清晰。

let col=document.querySelectorAll('select.form-control');

const changehandler=function(e){
  let other=document.querySelector('select.form-control:not( [ name="'+this.name+'" ] )');
  if(other.disabled==true )other.disabled=false;
  if(this.value==other.value)other.disabled=true;
};

col.forEach(sel=>sel.addEventListener('change',changehandler));

label{display:inline-block;padding:0.5rem;margin:1rem;width:50%;}
select{padding:1rem;float:right;width:50%;margin-top:-1rem;}
select[disabled]{border:2px solid red;}

<div class='form-group'>
    <label>From Account:
        <select class='form-control' name='from_account'>
            <option disabled selected hidden>Transfer From Account
            <option>abc-12345
            <option>def-89743
            <option>xyz-23423
            <option>pto-42342
            <option>tyk-23427
            <option>mrp-23456
        </select>
    </label>
</div>
<div class='form-group'>
    <label>To Account:
        <select class='form-control' name='to_account' disabled>
            <option disabled selected hidden>Transfer To Account
            <option>abc-12345
            <option>def-89743
            <option>xyz-23423
            <option>pto-42342
            <option>tyk-23427
            <option>mrp-23456
        </select>
    </label>
</div>