Динамический узел выпадающего меню JS - PullRequest
Новая
       25

Динамический узел выпадающего меню JS

0 голосов
/ 07 марта 2019

Я новичок в узле. Мне нужно сделать зависимое раскрывающееся меню, которое получает адресные данные выбранного пользователя из другого раскрывающегося меню на той же странице. Проблема заключается в том, что страница с отверстиями обновляется не только во втором раскрывающемся меню ... Я думаю, что это та же проблема как динамически выпадающий в nodejs mysql , но это мне не сильно помогло. 

<select name="selectUser" id="user" >
  <option disabled selected> Select User..</option>
  <% users.forEach((users) => { %>
    <option value="<%= users.id %>" > <%=users.name %> </option>
  <%  })  %>
</select>
<br>
<label>Address :</label>
<select name="selectAddress" id="address">
  <option disabled selected> Select Address..</option>
  <% address.forEach((address) => { %>
    <option value="<%= address.addressId %>" > <%=address.addressName %> </option>
</select>
  <%  })  %>

мой запрос Ajax: 

 $(document).ready(function(){
  $('#user').change(function(){

   var item =  $('#user').val();
   var add  = $('#address').val();
   $.ajax({
       type:'GET',
       data: {selectedId : item },
       url:'/order/new',
       success: function(result1){
           $('#body').html(result1);

       }
   });
  });
});

order.js 

 module.exports = {
      addOrderPage: (req, res) => {
    let query1 = "SELECT * FROM users";
    getConnection().query(query1, (err, result1) => {
            let query2 = "SELECT * FROM address WHERE userId = '" +req.query.selectedId + "'";
            getConnection().query(query2, (err, rows, fields) => {
              if (err) {
                return res.status(500).send(err);
              }
               console,log(rows)
              res.render('newOrder.ejs', {
                  address : rows,
                  users: result1
              });
              });
    });
}
    }

app.js 

app.get('/order/new', addOrderPage)

1 Ответ

0 голосов
/ 07 марта 2019

В вашей функции успеха отсутствуют данные, возвращаемые по запросу. Обновите вашу функцию успеха. 

       $(document).ready(function(){
       $('#user').change(function(){ 

        var item = $('#user').val();

        $.ajax({
            type:'GET',
            data: { selectedId: item },
            url:'/users/address',
            success: function(data){
                console.log(data);
                 $('#address').empty();
             $('address').append("<option disabled selected> Select Address..</option>");
             $.each(data, function (index, addressObj) {
                    $('#address').append("<option value = '" + addressObj.id + "' > " + addressObj.first_name + ". </option > ");
                });
            }
        });
       });

И в вашем файле order.js вам нужно создать один вызов для пользователей, а один вызов для данных адреса пользователя 

  module.exports = {
addOrderPage: (req, res) => {
    var selecteduser = req.query.selectedId;
    let query1 = "SELECT * FROM users";
    db.query(query1, (err, result1) => {
            if (err) {
                return res.status(500).send(err);
            }
            res.render('newOrder.ejs', {
                players: result1,
            });
    });
},
getUserAddress: (req, res) => {
    var selecteduser = req.query.selectedId;
    let query1 = "SELECT * FROM address WHERE userId = '" + selectedId + "'";
    db.query(query1, (err, result1) => {
        if (err) {
            return res.status(500).send(err);
        }
        res.send(result1);
    });
}

}

neworder.js 

 <select name="selectUser" id="user" >
    <option disabled selected> Select User..</option>
     <% users.forEach((users) => { %>
    <option value="<%= users.id %>" > <%=users.name %> </option>
    <%  })  %>
 </select>
 <br>
 <label>Address :</label>
 <select name="selectAddress" id="address">
  <option disabled selected> Select Address..</option>
 </select>

И в вашем app.js или index.js вам нужно добавить его маршрут 

 app.use("/users/address", order.getUserAddress);
...