Take 2 select value and display the data of each

Question

I’m putting together a page where the person will be able to compare 2 products.

I have 2 tables, categories and products.

The 1st combobox, make a select in the table of categories. When choosing a category, it calls a file that sees which products belong to that category.

So when choosing 2 products in the 2nd combobox(sublist) and pressing the button would have to be performed a select in the database, taking the 2 id’s of each sublist and display their data below.

Basically it would work like this:

<combo01> ComboBox 01</combo>
<combo02> ComboBox 02 </combo>
<combo01> sublist 01</combo>
<combo02> sublist 02</combo> //o conteúdo das sublists altera de acordo com o que foi selecionado no comboBox
<btn>Comparar</btn> //ao clicar em comparar, faria um select no banco com os 2 id de cada sublist, e mostraria os dados abaixo. 

I’ll put the code link here, if anyone can help me solve this problem, I would be very grateful

https://www.dropbox.com/sh/7eupvel35rli2qg/AADJBHRFFprKS1lQNJ06ZcKca?dl=0

Answer 1

I would do with ajax, passing the Ids of the products selected in the lists;

function buscaProduto(callback, id) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "endereco/funcao", //substitua pela página em php que acessa o banco e retorna os dados
        data: "{'cdProduto':'" + id + "'}", //vamos supor que você tenha uma função na página acima que espere um parametro com o nome cdProduto
        dataType: "json",
        success: function (json) {
            callback(json);                
        },
        error: function (XMLHttpRequest, status, error) {
            console.log(XMLHttpRequest);
            console.log(status);
            console.log(error);
        }
    });    
}

Calling the above function for product 01:

buscaProduto( function (json) {
    carregaProduto($.parseJSON(json.d), divProduto01);
}, [id do produto selecionado na lista01]);

and for product 02:

buscaProduto( function (json) {
    carregaProduto($.parseJSON(json.d), divProduto02);
}, [id do produto selecionado na lista02]);

Displaying the returned database data:

function carregaProduto(dados, div) {
   if (dados != null) {
      aprensenta os dados na div informada!
   } else {
      aprensenta mensagem de produto não encontrado!
   }    
}

You can make a new function to run both searchProduct() in the onClick event of the button like this:

function btnClick() {    
    buscaProduto( function (json) {
        carregaProduto($.parseJSON(json.d), $("#divProduto01");
    }, $("#tv_assinatura").val());

    buscaProduto( function (json) {
        carregaProduto($.parseJSON(json.d), $("#divProduto02"));
    }, $("#tv_assinatura02").val());
}

Note: I am just showing you a way to do and not giving you a code ready, so you copy and paste in your project.