NodeJs：- 从第一个下拉列表中获取值并动态填充第二个下拉列表中的值

Question

我正在处理一个下拉列表，并希望根据第一个下拉列表中选择的选项过滤第二个下拉列表中显示的结果。

我的 EJS 文件如下：-

 <div class="form-group">
        <label for="">Category</label>
        <select id="list" name="mainCategory" id="maincategory-dropdown" onchange="getSelectValue()" class="form-control">
            <% mainCategories.forEach(function(cat){ %>
                <option value="<%= cat.slug %>"
                <% if (cat.slug == mainCategory) { %>
                selected="selected"
                <% } %>        
                ><%= cat.title %></option>
            <% }); %>
        </select>
    </div>

    <div class="form-group">
        <label for="">Subcategory</label>
        <select name="category" id="category-dropdown" class="form-control">
            <% categories.forEach(function(cat){ %>
                <option value="<%= cat.slug %>"
                <% if (cat.slug == category) { %>
                selected="selected"
                <% } %>        
                ><%= cat.title %></option>
            <% }); %>
        </select>
    </div>

我希望子类别下拉列表中的值按照类别下拉列表中选择的选项显示。

我正在从后端获取值。 JS文件如下：-

router.get('/edit-product/:id',ensureAuthenticated, function (req, res) {

    MainCategory.find(function(err,mainCategories){

        Category.find(function (err, categories) {

            Product.findById(req.params.id, function (err, p) {
                if (err) {
                    console.log(err);
                    res.redirect('/admin/products');
                } else {
                    var galleryDir = 'public/assets/img/products/' + p._id + '/gallery';
                //  var recommendationDir = 'public/assets/img/products/' + p._id + '/recommendation';
                    var galleryImages = null;
                //  var recommendationImages = null;

                    fs.readdir(galleryDir, function (err, files) {
                        if (err) {
                            console.log(err);
                        } else {
                            galleryImages = files;
                           // console.log("The gallery image is" + galleryImages)
                           //console.log(p);
                            res.render('admin/edit_product', {

                                product:p,
                                title: p.title,
                                description: p.description,
                                categories: categories,
                                category: p.category.replace(/\s+/g, '-').toLowerCase(),
                                mainCategories: mainCategories,
                                mainCategory: p.mainCategory.replace(/\s+/g, '-').toLowerCase(),
                                mainImage: p.mainImage,
                                thumbImage1 : p.thumbImage1,
                                thumbImage2 : p.thumbImage2,
                                thumbImage3: p.thumbImage3,
                                recommendationImage1: p.recommendationImage1,
                                recommendationImage2: p.recommendationImage2,
                                recommendationImage3: p.recommendationImage3,
                                recommendationUrl1: p.recommendationUrl1,
                                recommendationUrl2: p.recommendationUrl2,
                                recommendationUrl3: p.recommendationUrl3,
                                galleryImages: galleryImages,
                                id: p._id,
                                productID:p.productID                                
                            });
                        }
                    });
                }
            });

        });
    })
});

我有点陷入困境。请帮帮我

Answer 1

如果可以使用纯 javascript (jQuery) 解决方案，以下可能会有所帮助，它只是根据 data-dep 属性过滤下拉选项并返回过滤选项，或者如果您正在寻找高级下拉选项依赖项，请检查此 @ 987654321@.

let $select1 = $( '#select1' ),
		$select2 = $( '#select2' ),
    $options = $select2.find( 'option' );
    
$select1.on( 'change', function() {
	$select2.html( $options.filter( '[data-dep="' + this.value + '"]' ) );
} ).trigger( 'change' );

option {
  margin: 0.5em;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
    <option value="1" data-dep="1">option 1 - 1</option>
    <option value="2" data-dep="1">option 1 - 2</option>
    <option value="3" data-dep="1">option 1 - 3</option>
    <option value="4" data-dep="2">option 2 - 1</option>
    <option value="5" data-dep="2">option 2 - 2</option>
    <option value="6" data-dep="3">option 3 - 1</option>
    <option value="7" data-dep="3">option 3 - 2</option>
    <option value="8" data-dep="3">option 3 - 3</option>
    <option value="9" data-dep="4">option 4 - 1<option>
</select>
</div>

Answer 2

const categories = ['a', 'b', 'c'];
const subCategories = {
  a: ['a-1', 'a-2', 'a-3'],
  b: ['b-1', 'b-2', 'b-3'],
  c: ['c-1', 'c-2', 'c-3'],
};
const catSelect = document.getElementById('cat');
const subCatSelect = document.getElementById('subcat');

catSelect.innerHTML = categories.map(cat => `<option val=${cat}>${cat}</option>`).join('');
catSelect.addEventListener('change', setSubcategories);
setSubcategories();


function setSubcategories() {
  subCatSelect.innerHTML = subCategories[catSelect.value].map(cat => `<option val=${cat}>${cat}</option>`).join('');
}

<select id="cat"></select>
<select id="subcat"></select>