Как очистить выделенный текст, когда сделан другой выбор?

Question

Я хочу удалить первый выделенный текст после того, как сделан другой выбор

Изображение 1 Перед выбором Второе поле

Изображение 2 Выбор выполняется во втором поле

Изображение 3 Другой выбор сделан, а текст еще не очищен

J Функция запроса

<script type='text/javascript'>
$(document).ready(function(){
    $('#department').change(function(){
        var department = $(this).val(); 
          //  console.log(department);
        $.ajax({
            url: "<?php echo base_url();?>admin/payroll/fetch_employee",
            method: "POST",
            data: {department_id: department},
            success: function(data)
            {
                    $('#employee').html(data);
            }
        });
    });
 });
</script>

Вот как я пишу для окна выбора

       <div class="form-group" id="border-none">
                    <label for="field-1" class="col-sm-3 control-label"><?= lang('department') ?>
                       <span class="required">*</span>
                    </label>
                    <div class="col-sm-5">
                        <select name="department" class="form-control select_box" style="width: 100%" id="department">
                            <option value=""><?= lang('select') . ' ' . lang('department') ?></option>                              
                            <?php foreach ($all_department as $row){?>
                            <option <?php if(!empty($allowance_info)){
                                foreach($all_users as $user){
                                    if($row->departments_id==$user->departments_id){ echo 'selected="selected"'; }}
                            }?>value="<?= $row->departments_id?>" ><?= $row->deptname?></option>
                            <?php } ?>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="border-none">
                    <label for="field-1" class="col-sm-3 control-label"><?= lang('employee') ?>
                       <span class="required">*</span>
                    </label>
                    <div class="col-sm-5">
                        <select name="employee_id" class="form-control select_box" style="width: 100%" id="employee">
                            <option value=""><?= lang('select') . ' ' . lang('employee') ?></option>       
                            <?php if(!empty($allowance_info)){ ?>
                               <?php foreach ($account as $row){?>
                                <option <?php if( $row->employment_id == $allowance_info->employee_id ){ echo 'selected="selected"'; } ?>
                                value="<?= $row->employment_id?>" ><?= $row->fullname ?> 
                                </option>
                            <?php }} ?> 
                        </select>
                     </div>
                </div>

Это мой код в контроллере для выбора сотрудника

public function fetch_employee()
{
    if($this->input->post('department_id'))
    {
        echo $this->payroll_model->fetch_employee($this->input->post('department_id'));
    }
}

Это мой код в модели для получения данных о сотрудниках

function fetch_employee($department)
{
    // $this->db->where('departments_id', $department);
    // $this->db->order_by('username', 'ASC');
    // $query = $this->db->get('tbl_users');

    $this->db->select('tbl_account_details.*', FALSE);
    $this->db->select('tbl_users.*',FALSE);
    $this->db->from('tbl_account_details');
    $this->db->join('tbl_users','tbl_users.user_id=tbl_account_details.user_id','left');
    $this->db->where('tbl_users.departments_id', $department);
    $query = $this->db->get();

    $output = '<option value="">Select Employee</option>';
    foreach($query->result() as $row)
    {
        $output .= '<option value="'.$row->employment_id.'">'.$row->fullname.'</option>';
    }
    return $output;

}

Answer 1

Если предположить, что у одного тега <select> есть идентификатор department, а у другого <select> есть employee

Здесь, при изменении раскрывающегося списка отделов, сбрасывается раскрывающийся список сотрудников

<script type='text/javascript'>
$(document).ready(function(){
    $('#department').change(function(){
        var department = $(this).val(); 
        $('#employee').html('<option value="">Select Employee</option>'); //Resetting employee dropdown here

        $.ajax({
            url: "<?php echo base_url();?>admin/payroll/fetch_employee",
            method: "POST",
            data: {department_id: department},
            success: function(data)
            {
               $('#employee').html(data);
            }
        });
    });
 });
</script>

HTML должен быть таким:

<select id="employee">
  <option value=''>Select Employee</option>
  <option value='Jhon'>Jhon</option>
  <option value='Smith'>Smith</option>
  <option value='Elia'>Elia</option>
</select>

<select id="department">
  <option value=''>Select Department</option>
  <option value='IT'>IT</option>
  <option value='HR'>HR</option>
  <option value='Accounts'>Accounts</option>
</select>

См. Демонстрацию в реальном времени на JSFiddle