Soy nuevo en jquery y ajax. Realmente necesito tu ayuda.

Tengo dos casillas de selección, una para agregar opciones dinámicamente a una selección cuando la primera casilla de selección está marcada. Usé ajax para obtener dinámicamente esos valores. Obtengo valores correctamente de la base de datos. Pero cuando trato de agregar estas opciones dentro del segundo cuadro de selección, no funciona. Mi codigo esta abajo

    $(document).ready(function() {
       
        $("#categories").change(function() {
            
            var categoryId = $("#categories").val();
            //alert(categoryId);
            if(categoryId == 2) {
                
                $.ajax({                    
                    url: "<?= base_url();?>Web/getRateType",
                    method: "POST",
                    dataType: "json",
                    success:function(data) {
                        //alert(data[0].status);


                        $("#rate_container").css('display', 'block');
                        $("#expected_salary_container").css('display', 'none');
                        $("#rate_categories").empty();

                       // var str = '<label>Rate*</label></br>';
                        //str += '<select name="rate_categories" style="font-size:15px" id="rate_categories"><option value="0">Select</option>';
                        var str = '';
                        $.each(data, function(key, value) {
                            //alert(value['rate_id']);
                            str +='<option value="'+ value['rate_id'] +'">'+ value['rate_cat_name'] +'</option>';  
                        });
                       alert(str);
                        //str += '</select>';
                        var x = $("#rate_categories").append(str);
                        if(x){
                            alert(x);
                        }
                    }
                });//$("#rate_categories").append('<option value="'+ value.rate_id +'">'+ value.rate_cat_name +'</option>');
            }
            else if (categoryId == 1) {
                document.getElementById("expected_salary_container").style.display = "block";
                document.getElementById("rate_container").style.display = "none";
            }
            else{
                document.getElementById("expected_salary_container").style.display = "none";
                document.getElementById("rate_container").style.display = "none";
            }
        });
<div class="col-lg-6 col-md-6">
<div class="form-group">
<label>Job Type*</label>
<select name="categories" id="categories">
<option value="0">Select</option>
<?php foreach($categories as $key => $value) { ?>
<option value="<?php echo $value['type_id']; ?>"><?php echo $value['cat_name']; ?></option>
<?php } ?>
</select>
</div>
</div>


<div class="form-group">
<label>Rate*</label>
    <select id="rate_categories" name="rate_categories">
        <option value="0">Select</option>
    </select>
</div>

Aquí alerta (x) está funcionando bien. pero el html no se agrega dentro del cuadro de selección. ¿Alguien podría ayudar por favor?

Se hace referencia a jQuery en el encabezado:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
1
achu 4 oct. 2021 a las 08:36

2 respuestas

La mejor respuesta

Está llamando a la función lista antes de que se incluya jQuery JavaScript. Primero, haga referencia a jQuery. Sin embargo, compruebe la carga del archivo JS de la pestaña de red.

Primero debe poner las referencias a los scripts de jquery.

<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>

Utilice la nueva URL de jquery CDN compatible en la etiqueta de script anterior.

0
Hasitha Gamage 4 oct. 2021 a las 06:22

Examine el código a continuación y vea si funciona para usted. He cambiado el JS vainilla a jQuery. Es posible que deba volver a insertar su código php nuevamente.

$(document).ready(function() {

  //Hide everything
  $("#expected_salary_container, #rate_container").hide();


  $("#categories").change(function() {

    var categoryId = $("#categories").val();
    console.log(categoryId);
    //alert(categoryId);
    if (categoryId == 2) {

      let data = ["Item 1", "Item 2", "Item 3"];
      str = "";
      $.each(data, function(key, value) {
        //alert(value['rate_id']);
        str += '<option value="' + value + '">' + value + '</option>';
        console.log(str);
      });
      var x = $("#rate_categories").append(str);

      $("#expected_salary_container").hide();
      $("#rate_container").show();

    } else if (categoryId == 1) {
      $("#expected_salary_container").show();
      $("#rate_container").hide();

    } else {
      $("#expected_salary_container").hide();
      $("#rate_container").show();
    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-6 col-md-6">
  <div class="form-group">
    <label>Job Type*</label>
    <select name="categories" id="categories">
      <option value="0">Select</option>

      <option value="2">Cat 1</option>
      <option value="1">Cat 2</option>
      <option value="2">Cat 3</option>

    </select>
  </div>
</div>


<div id="rate_container">
  <div class="form-group">
    <label>Rate*</label>
    <select id="rate_categories" name="rate_categories">
      <option value="0">Select</option>
    </select>
  </div>
</div>

<div id="expected_salary_container">
  <div class="form-group">
    <label>Salary*</label>
    <select id="rate_categories" name="rate_categories">
      <option value="0">Select</option>
    </select>
  </div>
</div>
0
Miro 4 oct. 2021 a las 07:17