Page of product comparison

Question

I created a page where I first make a choice on a select/list (musical genre), then depending on the choice appears the second select/list (music) with options related to the genre.

What I need is that the items being chosen (songs) are included in a list below so that I can then make a choice for comparison (those with more details), and each of them can be sent (via email or bank), through a checkbox thus ending the process of choice, comparison and shipping.

Could anyone help how to do this in PHP and Mysql? Note: I have the initial scripts, but the list on the same page is what I’m doing... (shopping cart type only on the same page)

Answer 1

From what I understand your problem is with javascript.

I recommend using a library called jQuery.

With jQuery you can do:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#id-do-select-musica').change(function(){
  // por convenção minha, se a variavel conter um objeto jQuery eu começo o nome 
  // dela com $
  var $opcaoSelecionada = $(this).find('option:selected');
  // você pode acessar o valor da option selecionada aqui
  console.log( $opcaoSelecionada.val() );
  //pode acessar o conteúdo do option selecionado também
  console.log( $opcaoSelecionada.text() );

  // Se quiser copiar a option pra outro select
  $opcaoSelecionada.clone().appendTo( $('#idDaListaDeMusicasSelecionadas') );

});
</script>

I recommend learning about jQuery, it is very simple to use and very useful.

About your comment, I showed you how you take the values of the value attribute of the option selected with .val() and its textual content with .text().

If you want to create a checkbox with these values, you can write the checkbox in javascript and add them to the element you want:

// cria o checkbox que você quer colocar na nova lista
var meuCheckbox = '<input type="checkbox" value="'+$opcaoSelecionada.val()+'">';
// adicionar o checkbox ao div com id="meuDiv"
$('#meuDiv').append(meuCheckboc);

You would have to put this code inside the anonymous function that is as parameter of function .change that I wrote above.