Question

我有2个动态下拉列表，即Levels和Grades，也可以进行多选。每当我在“级别”下拉菜单中选择一个选项时，“成绩”下拉列表会更改其值。如果我在“级别”下拉列表中选择高中，那么“成绩”下拉值现在将是7 - 10年级。现在，问题是，如果我在“Levels”下拉菜单中选择了Kinder，而之前选择了High School，则“等级”下拉值如Kinder和Prep重复。这不是发生重复的唯一情况。当我在“级别”下拉列表中取消选择其中一个或两个时，会发生同样的事情。

这是我的截图： image

以下是我的代码：
*我在下拉列表中使用select2插件

HTML - send_sms_non.blade.php

//Levels dropdown list
<select multiple="multiple" class="form-control select2meAdd selectelement" required id="levels" name="levels[]" style="width:50%;">
 <option value="" selected disabled></option>
     @foreach ($data['stages'] as $stage)
       <option value="{{ $stage->id }}">{{ $stage->stage }}</option>
     @endforeach
</select>

//Grades dropdown list
<select multiple="multiple" class="form-control select2meAdd selectelement" required id="grades" name="grades[]" style="width:50%;">
</select>

PHP

public function getIndexNon()
    {
        if (!(require_school_access('ACCESS-SMS', 4))) {
            return redirect('/home/invalid-access');
        }

        $data['subscription'] = $this->subscription;
        $data['schoolfront'] = $this->schoolfront;        
        $data['accounts'] = SchoolAccount::where('school_id',$this->subscription->subscription->id)->get();
        $data['stages'] = SchoolStages::where('school_id',$this->subscription->subscription->id)->get();

        return view('school.send_sms_non', array('data' => $data));
    }

public function getAjaxDataGrades(Request $request)
    {
        $level_ids = explode(',', Input::get('level_ids'));

        // $selected_levels = array();
        // foreach ($level_ids as $level_id) {
        //     if ($level_id) {
        //         if (!in_array($level_id,$selected_levels)){
        //             $selected_levels[] = $level_id;
        //         }
        //     }
        // }

        $grades = SchoolStages::leftJoin('school_stage_levels','school_stage_levels.stage_id','=','school_stages.id')
        ->whereIn('school_stage_levels.stage_id',$level_ids)
        ->where('school_stages.school_id',$this->subscription->subscription->id)
        ->get();     

        return Response::json($grades);            
    }

JAVSCRIPT

$('.select2me').select2();

$('#levels').on('change',function(){
var level_ids = $(this).val();

   $.get('/sms/ajax-data-grades?level_ids='+level_ids, function(data){
        // $('#grades').empty();
        $('#grades').append('<option value="0" selected disabled>
        </option>');
        $.each(data, function(index, gradeObj){
           $('#grades').append('<option 
           value="'+gradeObj.id+'">'+gradeObj.level_code+'</option>');                      
       });
   });
});

非常感谢。

Answer 1

在.each函数中，您可以使用以下代码来检测传入项目是否已存在于成绩下拉框中。

var grades=$('#grades');
var allOptions=grades.children('option');
option = allOptions.find("[value='"++gradeObj.id+"']");
if (option.length==0)   //that mean does not exist
{    
    $('#grades').append('<option 
    value="'+gradeObj.id+'">'+gradeObj.level_code+'</option>');
}

Javascript动态下拉选项重复

1 个答案: