JQuery 下拉菜单的选定选项无法正常工作

Question

我有一个下拉菜单，其中包含两个选项 public 和 private。我正在使用 ajax 从数据库中获取数据并显示在表单字段中。所以我在 JQuery 中编写了脚本来设置要选择的值。但它只正常工作两次，比如 public 一次，第一次 private.

这是我的代码

HTML

<select name="insurance" class="form-select" id="insurance" required>
   <option value="">--Select--</option>
   <?php $insurance = App::make("App\Http\Controllers\AppointmentsController")->getInsurance(); ?>
    @foreach($insurance as $ins)  
       <option value="{{ $ins->id }}">{{ $ins->insurance }}</option>
    @endforeach
</select>

JQuery

if(data['insurance'] != ''){  
   console.log(data['insurance']);     // showing correct value
   $('#insurance > option[value="'+data["insurance"]+'"]').attr('selected',true);
}

这里 data['insurance'] 是我来自 ajax 的结果数组值。

首先我使用保险获取数据private - 工作正常
然后使用保险获取行 public - 工作正常
再次使用 private 获取数据 - 不工作（仅显示最后状态）

如果尝试获取任何值的记录 - 无效。

只有前两次，它工作正常

Answer 1

您还应该删除通过 jquery 选择的其他选项的属性。

正如我第一次看到的那样，那么由于两个都被选中，所以第一个将在表单中保持选中状态。

尝试这样的事情：

if(data['insurance'] != ''){  

   if(data['insurance'] == 'public'){
     $('#insurance > option[value="private"]').removeAttr('selected');
     $('#insurance > option[value="public"]').attr('selected', true);
   }
   else{
     $('#insurance > option[value="public"]').removeAttr('selected');
     $('#insurance > option[value="private"]').attr('selected', true);
   }

}

Answer 2

我通过添加单行代码解决了我的问题。实际问题是，selected 选项始终保持 selected。如果我 select 一个选项然后第二个都将被标记为 selected。因此，在下一次调用中，将显示第一个选项，因为两者都是 selected。因此，在将 selection 分配给新选项之前，我添加了删除 selection 的代码。

这是我更正后的代码：

if(data['insurance'] != ''){  console.log(data['insurance']);
   $('#insurance').find('option:selected').attr('selected', false);
   $('#insurance > option[value="'+data["insurance"]+'"]').attr('selected',true);
}

JQuery 下拉菜单的选定选项无法正常工作

JQuery selected option for Dropdown is not working properly

jquery

laravel

dropdown