Question

我有一个下拉列表。我从数据库加载我的所有到期客户列表。但是一个客户还有一个到期金额。因此，它会在我的下拉列表中加载并生成重复的客户端名称，现在我想删除重复的客户名称。

这是我的下拉列表。

 <label class="form-label">Client Name</label>
                            <select class="form-control"  name="client_id" id="client_id">   
                             <option value="">-Select Client-</option>
                             @foreach($clients as $client)
                             <option value="{{$client->id}}">{{$client->client_name}}</option>
                             @endforeach
                            </select>

这是我尝试过的jquery部分。

 $(document).ready(function(){
var map={};
$('#client_id').each(function(){
  if(map[this.value])
  {
    $(this).remove();
  }
  map[this.value]=true;
});

}）;

Answer 1

使用.siblings（）（定位兄弟选项元素）和属性等于选择器[attr =＆＃39;＆＃39;]

$(".select option").val(function(idx, val) {
  $(this).siblings("[value='"+ val +"']").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select">
  <option value="">All</option>
  <option value="com">.com 1</option>
  <option value="net">.net 1</option>
  <option value="com">.com 2</option> <!-- will be removed since value is duplicate -->
  <option value="net">.net 2</option> <!-- will be removed since value is duplicate -->
</select>

工作原理：

虽然逐个访问选项（通过.val（）） - 查找具有相同＆＃34; [value =＆＃39;＆＃34; + this.value +＆}的.sibling（）选项＃34;＆＃39;]＆＃34;和.remove（）他们。

Answer 2

你非常接近。

只需改变：

$('#client_id').each(function(){

为：

$('#client_id option').each(function(){

这将遍历所有选项而不是单个#client_id。

<强>段：

＆＃13;

var map = {};
$('#client_id option').each(function() {
  if (map[this.value]) {
    $(this).remove();
  }
  map[this.value] = true;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="client_id">   
  <option value="">-Select Client-</option>
  <option value="1">1</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

＆＃13;

Answer 3

在我看来，使用PHP防止重复值比使用JavaScript更简洁。

解决方案1 

通过Eloquent从数据库中选择时消除重复项。

// using Model
$clients = Client::get()->groupBy('client_name')->all();

// using DB::class
$clients = DB::table('clients')->get()->groupBy('client_name')->all();

解决方案2

使用Eloquent collect()消除重复client_name

// $clients should be an array
@foreach( collect( $clients )->groupBy('client_name')->all() as $client )
    <option value="{{ $client->id }}">{{ $client->client_name }}</option>
@endforeach

解决方案3

使用jQuery方法，以防您仍想使用jQuery删除重复项

 $(document).ready(function(){
    var map={};
    $('#client_id option').each(function(){
      var val=$(this).val();

      if( map[val] )
      {
          $(this).remove();
          return; // continue to next loop
      }

      // Registering val to map list
      map[val]=1;
 });

如何从jquery中的dropdownlist中删除或隐藏重复值

3 个答案: