Question

我在“国家名称”：“印度”，“国家名称”：“美国”中有“国家”表，还有更多条目... 第二个表“州” {“ country_name”：“印度”，“ state”：“ Haryana”}，{“ country_name”：“美国”，“ state”：“ Texas”}以及更多条目... 第三张表“ city” {“ state”：“ Haryana”，“ city”：“ Panchkula”}，{“ state”：“ Texas”，“ city”：“ abc”}以及更多条目... < / p>

这些都放在MongoDB中。现在，我想显示3个下拉列表，哪个国家选择，然后显示所有相应的州，然后选择任何州，然后应该显示相应的城市。

我正在使用NodeJ，但找不到准确的解决方案。我在这里分享我们的app.js代码

请帮助我...提前感谢

app.js

var express = require('express');
var routes = require('routes');
var http = require('http');
var bodyParser = require('body-parser');
var aa = bodyParser.urlencoded({extended: false});

var app = express();

app.set('port', process.env.PORT || 8000);
// Configure view engine to render EJS templates.
app.set('views', __dirname + '/views');
// app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
var mongoose = require('mongoose');
var url = "mongodb://localhost:27017/firstdb";

app.get('/', function(req, res){
    mongoose.connect(url, function(err, db){
        db.collection('country').find({}).toArray(function(err, result){
            if(err) throw err;
            res.render('index.html', {data: result});
            db.close();
        });
    });
});

app.post('/send', aa, function(req, res){
    var c = req.body.selectedCountry;
    mongoose.connect(url, function(err, db){
        if (err) throw err;
        var myquery = {country_name: c};
        db.collection('state').find(myquery).toArray(function(err, result){
            if(err) throw err;
            console.log("xxxxxxxxxxxxxxxxxxxxxxxx", result);
            res.render('index.html', {statevalue: result});
            db.close();
        });
    });
    res.end('done');
});

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listing on port "+app.get('port'));
})

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("select.country").change(function(){
                var selectedCountry = $(this).children("option:selected").val();
                // alert(selectedCountry);
                $.post('http://localhost:8000/send', {selectedCountry:selectedCountry}, function(data){
                    if(data === 'done'){
                        // window.location.href='/';
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select class="country">
        <option value="">Select Country</option>
        <% if(data.length) { 
        for(var i = 0; i<data.length; i++) { %>

            <option value="<%=data[i].country_name%>"><%=data[i].country_name%></option>
        <%
            }
            } else { %>
            <option value="">not found</option>
            <% } %>
    </select>
    <% if(statevalue.length)
    { %>
        <h1>hi</h1>
    <% }
     %>

</body>
</html>

表结构：国家表：

{ "_id" : ObjectId("5d159c63de4fda6382477bf6"), "country_name" : "India" }
{ "_id" : ObjectId("5d159c63de4fda6382477bf7"), "country_name" : "USA" }

状态表：

{ "_id" : ObjectId("5d159d09de4fda6382477bf8"), "country_name" : "India", "state" : "Punjab" }
{ "_id" : ObjectId("5d159d09de4fda6382477bf9"), "country_name" : "India", "state" : "Haryana" }
{ "_id" : ObjectId("5d159d09de4fda6382477bfa"), "country_name" : "USA", "state" : "Texas" }
{ "_id" : ObjectId("5d159d09de4fda6382477bfb"), "country_name" : "USA", "state" : "New York" }

城市表：

{ "_id" : ObjectId("5d15b3aede4fda6382477bfc"), "state" : "Punjab", "city" : "Mohali" }
{ "_id" : ObjectId("5d15b3aede4fda6382477bfd"), "state" : "Punjab", "city" : "Ludhiana" }
{ "_id" : ObjectId("5d15b3aede4fda6382477bfe"), "state" : "Haryana", "city" : "Panchkula" }
{ "_id" : ObjectId("5d15b3aede4fda6382477bff"), "state" : "Haryana", "city" : "Ambala" }
{ "_id" : ObjectId("5d15b3aede4fda6382477c00"), "state" : "Texas", "city" : "Dallas" }
{ "_id" : ObjectId("5d15b3aede4fda6382477c01"), "state" : "Texas", "city" : "Austin" }
{ "_id" : ObjectId("5d15b3aede4fda6382477c02"), "state" : "New York", "city" : "Auburn" }
{ "_id" : ObjectId("5d15b3aede4fda6382477c03"), "state" : "New York", "city" : "Fulton" }

nodejs和mongodb中的国家/地区城市下拉列表

0 个答案: