如果选择了一个下拉菜单，则修改视图，其他下拉菜单将被禁用

如何解决如果选择了一个下拉菜单，则修改视图，其他下拉菜单将被禁用

我有一张表格，其中我向用户分配了一些设备。我只想将一个设备分配给一个用户，因为我有开始日期和结束日期。我想从下拉菜单中选择某些显示器，手机和笔记本电脑将冻结并被选择为默认无显示器。我也想如果我选择手机用于ex，显示器和笔记本电脑冻结。我发现可以用javascript制作手机，但是我不知道该怎么做。 如果您能指导我或给我一个正确的例子，我将不胜感激。我是js的新手。

这是我的表格：

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\models\User;
use kartik\date\DatePicker;
/* @var $this yii\web\View */
/* @var $model app\models\UserEquipmentMapping */
/* @var $form yii\widgets\ActiveForm */

#print_r($userquery);die;

?>

<div class="user-equipment-mapping-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model,'user_id')
            ->dropDownList(ArrayHelper::map($usermodel,'id','username'))?>
            
    <?= $form->field($model,'laptop_id')
            ->dropDownList(ArrayHelper::map($laptopmodel,'laptop_series'))?>
            
    <?= $form->field($model,'phone_id')
            ->dropDownList(ArrayHelper::map($phonemodel,'phone_series'))?>
    
    <?= $form->field($model,'display_id')
            ->dropDownList(ArrayHelper::map($displaymodel,'display_series'))?>



    <?=$form->field($model,'start_date')->widget(DatePicker::classname(),[
        'language' => 'en','value' => date('yyyy/mm/dd',strtotime('+7 days')),'readonly' => true,#'disabled' => true,#'size' => 'lg',#'type' => DatePicker::TYPE_COMPONENT_APPEND,'options' => ['placeholder' => 'Selectati data'],'pluginOptions' => [
            #'orientation' => 'top right','format' => 'yyyy/mm/dd','todayHighlight' => true,'todayBtn' => true,'autoclose'=>true,]
]);?>

    <?=$form->field($model,'stop_date')->widget(DatePicker::classname(),]
]);?>


    <div class="form-group">
        <?= Html::submitButton('Save',['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

谢谢您的任何建议

更新：但仍然无法正常工作，我已经尝试了至少要测试的前两个下拉列表。

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\models\User;
use kartik\date\DatePicker;
/* @var $this yii\web\View */
/* @var $model app\models\UserEquipmentMapping */
/* @var $form yii\widgets\ActiveForm */

#print_r($userquery);die;

?>
    




<div class="user-equipment-mapping-form">
        <script>
$(document).ready(function(){
   if($("#dropDown1").val())
      $("#dropDown2").attr("disabled","disabled");
   else
      $("#dropDown2").removeAttr("disabled");

   if($("#dropDown2").val())
      $("#dropDown1").attr("disabled","disabled");
    else
      $("#dropDown1").removeAttr("disabled");

   $($("#dropDown1").on("change",function(){
       if($(this).val())
          $("#dropDown2").attr("disabled","disabled");  
       else
          $("#dropDown2").removeAttr("disabled");
   });
   $($("#dropDown2").on("change",function(){
       if($(this).val())
          $("#dropDown1").attr("disabled","disabled");  
       else
          $("#dropDown1").removeAttr("disabled");
   });
});
    </script>
    
    <?php $form = ActiveForm::begin(); ?>
    
    
    <?php 
    $userData=ArrayHelper::map($usermodel,'username');
    echo $form->field($model,'user_id')->dropDownList($userData,['prompt'=>'Select...'],array("id" => 'dropDown1'));
    ?>
    
    
            
    <?php 
    $laptopData=ArrayHelper::map($laptopmodel,'laptop_series');
    echo $form->field($model,'laptop_id')->dropDownList($laptopData,array("id" => 'dropDown2'));
    ?>  

    <?php 
    $phoneData=ArrayHelper::map($phonemodel,'phone_series');
    echo $form->field($model,'phone_id')->dropDownList(
                                    $phoneData,['prompt'=>'Select...']);
    ?>
    
    <?php 
    $displayData=ArrayHelper::map($displaymodel,'display_series');
    echo $form->field($model,'display_id')->dropDownList(
                                    $displayData,['prompt'=>'Select...']);
    ?>


    <?=$form->field($model,['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

解决方法

您的下拉菜单-添加onchange函数和类equipment

<?= $form->field($model,'laptop_id')->dropDownList(ArrayHelper::map($laptopmodel,'id','laptop_series'),['prompt'=>'Select...','onchange' => 'setEquipment(this)','class' => 'equipment'])?>

<?= $form->field($model,'phone_id')->dropDownList(ArrayHelper::map($phonemodel,'phone_series'),'class' => 'equipment'])?>
    
<?= $form->field($model,'display_id')->dropDownList(ArrayHelper::map($displaymodel,'display_series'),'class' => 'equipment'])?>

js

function setEquipment(el){
        var equipment_elements = $('.equipment');
        if($(el).val() != "") {
            $.each(equipment_elements,function (key,value) { //disable all elements
                $(this).attr('disabled',true);
            });
            $(el).attr('disabled',false); //enable current element
        }else{
            $.each(equipment_elements,value) { //enable all elements
                $(this).attr('disabled',false);
            });
        }
    }