How to refresh a dependent select from another select

Question

How to refresh a dependent select from another select

Navigation

#1 by (0 votes)

-1

I have a select dependent on another, in the first select the Department where a user works and in the second select the users that work in that department are loaded, this works well the first time a department is chosen, but if another department is chosen, it does not refresh the new users, but it keeps the ones that I charge with the first selection.

$(document).ready(function() {
    $("#project_id").change(function() {
      $("#project_id option:selected").each(function() {
        project_id = $(this).val();
        $.post("ajax/getassigned_user.php", {
          project_id: project_id
        }, function(data) {
          $("#user_id").html(data);
          $("#user_id").multiselect({
            includeSelectAllOption: true,
            selectAllJustVisible: false,
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            buttonWidth: '407px'
          });
        });
      });
    });
  });

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Departamento <span class="required"> * </span></label>
  <div class="col-md-9 col-sm-9 col-xs-12">
    <select id="project_id" name="project_id" class="form-control">
      <option value="">-- Seleccionar Departamento --</option>
      <?php while ($row = mysqli_fetch_assoc($result)) { ?>
      <option value="<?php echo $row['id'] ?>">
        <?php echo $row['name'] ?>
      </option>
      <?php } ?>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Asignado a <span class="required"> * </span></label>
  <div class="col-md-9 col-sm-9 col-xs-12">
    <select id="user_id" name="user_id[]" multiple class="form-control">
    </select>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

jquery php ajax

asked by Julián Cordoba 30.05.2018 в 23:54

source

1 answer

how to add letters and numbers in C # code? [closed] Problem with SQL Server script? Help

score 0 · Accepted Answer

You should create a function called fillSelect () for example, in which by ajax, you call getassigned_user.php and pass the id to which you want to bring the list, and simply, call that function every time you change the first select.

<select id="project_id" name="project_id" class="form-control" onChange="rellenarSelect(this.value)">

We add the onChange attribute to the first select by passing it "this.value" so that when it changes, take the value of the option, which will be our id, then you do the function to bring all the data.

function rellenarSelect(val){
    $.ajax({
      url: 'ajax/miscript.php?id_departament0=' + val,
      onError: function(error){
         console.log('error');
      },
      onSuccess: function(response){
          $('#select2').html(response);
      }
    })
}

In the php script you should control the errors and return a string of text with all the options, that is, in the response, there should be the following:

 <option value="1">departamento1</option><option value="2">departamento2</option><option value="3">departamento3</option>

In such a way that when calling .html () of the select to fill, it does not automatically delete all the options inside and it inserts the new ones, and when being in a function that is called always changing the first one, you will always change the second.

I hope it serves you