如何使用 AJAX nodejs 的另一个下拉列表更新下拉列表的值？答案

【问题标题】：How to update values of dropdown using another dropdown with AJAX nodejs?如何使用 AJAX nodejs 的另一个下拉列表更新下拉列表的值？
【发布时间】：2021-01-09 18:34:30
【问题描述】：

我有两个下拉菜单。一是选择主类，二是选择子类。
我希望能够根据所选的主类别填充子类别。

到目前为止，我尝试的是使用 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吗？
没有。我正在使用 EJS
我一直使用 PHP 而不是 EJS。我怕我帮不上忙。在 PHP 中，我将 DOM 上的 select 替换为 post back 中内置的新 select。然后我不必费心附加或更改现有选项。
这可能会有所帮助。只需发布您的答案

标签： javascript jquery node.js ajax

【解决方案1】：

我会在 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 回帖

  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


                        }

【讨论】：