Множественное иначе, если в jQuery

Question

Я делаю зависимое поле выбора, используя jquery, ajax и php из той же таблицы базы данных. Тестовая страница

   $(document).ready(function(){
     $('.action').change(function(){
      if($(this).val() != '')
      {
       var action = $(this).attr("id");
       var query = $(this).val();
       var result = '';
    
       if(action == "name") {
        result = 'category';
           alert ('test1');
           
       } else if (action == "category")  { 
        result = 'material';
           alert ('test2');
           
       } else if (action == "material")  { 
        result = 'source_light'; 
           alert ('test3');
           
       } else if (action == "source_light")  { 
       result = 'color_temperature';    
           alert ('test4');   
       } else {
         // result = 'color_temperature'; 
       }
          
       $.ajax({
        url:"fetch_filter2.php",
        method:"POST",
        data:{action:action, query:query},
        success:function(data){
         $('#'+result).html(data);
        }
       })
      }
     });
    });

Не знаю почему, но работает только test1 и test2. Test3 и 4 не отправляются на php.

HTML файл

Может что-то не так с полем выбора? Но это всего лишь поле выбора с идентификаторами.

 <select name="name" id="name" class="form-control action">
    <option value="">Select name</option>
    <?php echo $name; ?>
   </select>
   <br />

   <select name="category" id="category" class="form-control action">
    <option value="">Select category</option>
   </select>
   <br />

   <select name="material" id="material" class="form-control">
    <option value="">Select material</option>
   </select>
   <br />
    
   <select name="source_light" id="source_light" class="form-control">
    <option value="">Select source_light</option>
   </select>
   <br />
    
   <select name="color_temperature" id="color_temperature" class="form-control">
    <option value="">Select color_temperature</option>
   </select>

Answer 1

Как насчет этого

     $(document).ready(function(){
     $('.action').change(function() 
      {
      if($(this).val() != '')
      {
       var action = $(this).attr("id");
       var query = $(this).val();
       var result = '';
        switch(action) {
         case "name":
          result = 'category';
          alert ('test1');
        break;
        case "category":
         result = 'material';
         alert ('test2');
        break;
       case "material":
        result = 'source_light';
        alert ('test3');
       break;
       case "source_light":
        result = 'color_temperature';
         alert ('test4');
        break;
        default:
         // result = 'color_temperature'; 
       }
          
       $.ajax({
        url:"fetch_filter2.php",
        method:"POST",
        data:{action:action, query:query},
        success:function(data){
         $('#'+result).html(data);
        }
       })
      }
     });
    });

Answer 2

Проверьте раскрывающийся список под классом «действие». В соответствии с вашим условием он не сработает, если выбранный вами раскрывающийся элемент не имеет значения if($(this).val() != '').

Также убедитесь, что ожидаемые раскрывающиеся элементы имеют значение материал для вашего test3 и source_light для вашего test4

Другое предложение: чтобы загрузить и запустить динамическое c событие изменения для раскрывающегося списка, вы можете использовать ниже jQuery API:

$(document).on("change", ".action", function(){
//Your code here
});

Если это не решит вашу проблему, поделитесь своими HTML или раскрывающимися данными.

Обновленный ответ: я вижу, что в элементах выбора / раскрывающихся списках материалов нет «действия» класса , источник_света и цвет_температура. Вот почему действия изменения этих выпадающих элементов не улавливаются в вашем блоке кода $ ('. Action'). Change (function () ....