Блог

У меня есть два выпадающих списка. Один предназначен для выбора основной категории, второй — для выбора подкатегории.
Я хочу иметь возможность заполнять подкатегорию на основе выбранной основной категории.

До сих пор я пробовал использовать JQUERY и AJAX для прослушивания изменений в значении выпадающего списка с помощью jquery и отправки ajax-запроса на соответствующий маршрут.

Вид

                      <div class="form-control">
                        <label for="category">Category</label>
                        <select name="category" id="category">
                            <option value='Men'>Men</option>
                            <option value='Women'>Women</option>
                            <option value='Sports'>Sports</option>
                           
                        </select>

                    </div>

                    <div class="form-control">
                        <label for="subcategory">Sub Category</label>
                        <select id="subcategory" name="subcategory">
                        </select>
                    </div>
  

AJAX и JQUERY

 $("#category").on("change", function () {
    $("#subcategory").empty();
    showValue($(this).val());
});
var data = {};

function showValue(val) {
    console.log(val);
    data.category = val;
    $.ajax({
        url: "/admin/update-list",
        type: "POST",
        data: data,
        success: function(result) {

        updateDOM(result);
        },
        error: function (err) {
        console.log(err);
        }
    });
};

var updateDOM = function (result) {
    
    var data = result.data;
    
    for (var i = 0; i < data.length; i  ) {
        console.log(data[i]);
        $("#subcategory").append("<option>"  data[i]  "</option>");
    };
   
    };

  

Маршрут /admin/update-list

 router.post('/update-list', (req,res,next) => {
  let data = [];
  let category = req.body.category;
 

  console.log('From the ajax call, category is'   category);


  if(category = "Men") {
    data = [
      'Sneakers',
      'Boots',
      'High Heels',
      'Litas',
      'Timbs'
    ];
    res.status(200).json({data});
    res.end();
  }
  else if(category = "Women") {
    data = [ 
      'Timbs'
    ];
     res.status(200).json({data});
     res.end();
  }
   else if(category = "Sports") {
    data = [ 
      'Soccer Boots',
      'Rugby Boots'
    ];
     res.status(200).json({data});
     res.end();
  }



});
  

Независимо от того, какой вариант я выберу, второй выпадающий список возвращает те же данные.

Я бы сделал это на PHP. Надеюсь, это передает то, что вы могли бы адаптировать к вашей ситуации:

 <select name="foo" >

</select> 
  

вызов ajax

         $.ajax({
            type:'POST',
            url:'your_code_page.php',
            data:'param1=' variable,
            success:function(html){
                $('[name="foo"]').html(html);
            }
        }); 
  

PHP post back

   echo "<option value=''>Please select a thing</option>"; <<outside loop
                        while ($row = sqlsrv_fetch_array($results)) {
                            $value   = $row['value'];
                            $display = $row['display'];
                            //-display the result of the array 
                            

       echo "<option value= " . $value . ">" . $display . "</option>"; << options returned in post


                        }