在addEventListener的值更改之前调用promise

时间:2018-02-07 03:12:49

标签: javascript javascript-events promise es6-promise

我有3个下拉列表

  • 首先是公司名称,
  • 第二个产品名称和
  • 第三是风味名称

但是当我更改公司名称时,则根据公司产品名称更改

就像公司A有产品xyz而B有产品abc 但是当我改变公司名称A到B最后承诺称为A公司以前的价值为什么?

您可以在控制台SQL查询中看到此处

enter image description here

function load_company(sql)
{
    return new Promise((resolve,reject)=>{
        db.query(sql)
        .then(data=>{
            if(data.length>0)
            {
                document.querySelector("#pname").innerHTML="";
                let c_name="";
                for(let i=0; i<data.length; i++)
                {
                    c_name+="<option>";
                    c_name +=data[i].product_name;
                    c_name+="</option>";
                }
                document.querySelector("#pname").innerHTML=c_name;
                resolve(document.querySelector("#fname").innerHTML=c_name);
            }
            else
            {
                reject(sql);
            }
        })
    })
}

function load_flavour(sql)
{
    console.log("2");
    return new Promise((resolve,reject)=>{
        db.query(sql)
        .then((data)=>
        {
            console.log(data);
            if(data.length>0)
            {
                document.querySelector("#fname").innerHTML="";
                let c_name="";
                for(let i=0; i<data.length; i++)
                {
                    c_name+="<option>";
                    c_name+=data[i].flavours;
                    c_name+="</option>";
                }    
                document.querySelector("#fname").innerHTML=c_name;
                resolve(document.querySelector("#fname").innerHTML=c_name);
            }
            else
            {
                reject(sql);
            }
        })
    })
}

const cname = document.querySelector("#cname");
cname.addEventListener("change",function(){
    let pname = "select distinct product_name from tbl_product where compony_name='"+document.querySelector("#cname").value+"'";
    let fname = "select  distinct flavours from tbl_product where compony_name='"+document.querySelector("#cname").value+"' and product_name='"+document.querySelector("#pname").value+"'";
    load_company(pname)
        .then(()=>{
            load_flavour(fname);
        });
})

1 个答案:

答案 0 :(得分:0)

您无需在new Promise中包装已经是承诺的内容。

我认为问题是在创建产品选择列表之前尝试获取产品价值:

function load_company(sql) {
  return db.query(sql)
  .then(
    data => {
      if (data.length > 0) {
        const select = document.querySelector("#pname");
        select.innerHTML = data.reduce(
          function(all,item){
            all.push("<option>");
            all.push(item.product_name);
            all.push("<option>");
            return all;
          },
          []
        ).join("");
        return select.innerHTML;
      }
      else {
        return Promise.reject(sql);
      }
    }
  );
}

function load_flavour(sql) {
  console.log("2");
  return db.query(sql)
  .then((data) => {
    console.log(data);
    if (data.length > 0) {
      const select = document.querySelector("#fname");
      select.innerHTML = data.reduce(
        function(all,item){
          all.push("<option>");
          all.push(item.flavours);
          all.push("<option>");
          return all;
        },
        []
      ).join("");
      return select.innerHTML = c_name;
    }
    else {
      return Promise.reject(sql);
    }
  });
}

const cname = document.querySelector("#cname");
cname.addEventListener("change", function () {
  let pname = "select distinct product_name from tbl_product where compony_name='" + document.querySelector("#cname").value + "'";
  load_company(pname)
  .then(
    () => {
      //here you have re created products so now you get get the value of the product
      // assuming it has a value
      let fname = "select  distinct flavours from tbl_product where compony_name='" + document.querySelector("#cname").value + "' and product_name='" + document.querySelector("#pname").value + "'";
      return load_flavour(fname);
    }
  ).then(
    x=>console.log("both are done")
  ).catch(
    err=>console.warn("There was an error:",err)
  );
});

您的选项元素没有value property我认为您希望将其设置为数据项的ID。