There is a select, with the help of jquery, by clicking on one of the option points, I add another select to the document. I do so.

$('#select-currence').append( '<select class="information-select" id="information-select- currence">' + '<option value="0">Выберите валюту</option>' + '<option value="1">€</option>' + '<option value="2">₽</option>' + '</select>' );

Is it possible now to add one more select to the document by clicking on one of the options? It does not work for me in the same way.

Here I tried to display the value simply by clicking on the option

  $('#information-select-currence').on('change', function(e){ var a = e.target.value; console.log(a); });
  • Well, firstly, the id should be unique. And you can add it several times, which is not good. Secondly, after adding a new DOM object to the document, you need to read the DOM again. That is, $ (document). ) .on ('change' ... - Vanya Avchyan
  • The id there is just a line break. div id = "information-select- currence" - jaans
  • I will try to recount the document again. $ (document) .find ('. information-select'). on ('change' - jaans
  • I answered your question in principle. $ (document) .find ('# information-select-currence'). on ('change' ... To get the added objects, you must reread the DOM obj-> $ (document) ... - Vanya Avchyan
  • Thanks for the advice but something is not working. I guess I do wrong. - jaans

2 answers 2

Make sure that your id generated unique. I would advise to remove them altogether and use classes instead.

To get the added objects, you must reread the DOM obj

And in the callback function, this points to this element. Use it.

Here is a working version:

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> </script> </head> <body> <div id='select-currence'></div> <script> $('#select-currence').append( '<select class="information-select" id="information-select-currence">' + '<option value="0">Выберите валюту</option>' + '<option value="1">€</option>' + '<option value="2">₽</option>' + '</select>' ); $(document).find('.information-select').on('change',function(){ alert( $(this).val()) }); </script> </body> </html>
  • Thanks Vanya, I will try this case tomorrow. It's late today. - jaans
  • Something does not work here is my option now. - jaans
  • $ (document) .find ('. select-curr'). on ('change', function () {console.log ('test');}); - jaans
  • @jaans This question was answered when it was said in a screwdriver that you should not work with id . - Vanya Avchyan

As a result, figured out.

  1. We receive div the unit where dynamically select select of type of currency is inserted.

    $ ('. select-currence')

  2. We connect the on () method which tracks change changes and the second parameter is passed to select

    .on ('change', 'select')

  3. Further kollbek function in which the necessary code is executed. I needed to get the values ​​of the selected option by the user. As a result, this fragment looks like this.

    $ ('. select-currence'). on ('change', 'select', function (e) {

    var curr = e.target.value;

    console.log (curr);

    });

All code

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>тест</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <body> <div> <select class="select-paytype"> <option value="0">Выберите тип оплаты</option> <option value="1">Договорная</option> <option value="2">Оплата за час</option> <option value="3">Оплата за день</option> <option value="4">Оплата за месяц</option> </select> </div> <div class="select-currence"> </div> </body> <script> $('.select-paytype').on('change', function(e){ var paytype = e.target.value; if(paytype == 0 || paytype == 1){ $('.select-currence').empty(); }else{ $('.select-currence').empty(); $('.select-currence').append( '<select class="select-curr">' + '<option value="0">Выберите валюту</option>' + '<option value="1">€</option>' + '<option value="2">₽</option>' + '</select>' ); } }); $('.select-currence').on('change', 'select', function(e){ var curr = e.target.value; console.log(curr); }); </script> </html>