how to separate and display select option data?

Question

I have two forms. form1 's content is a choice option filled by name, matricule, and salary, and a button validate, which hides form1 and displays form2 . I want when I click on the button, the contents of select to separate and show like this:

name:
registration number :
salary :

 $(document).ready(function() { $("#hide").click(function() { let name1 = $('#name').text(); let matricule1 = $('#matricule').text(); let salary1 = $('#salary').text(); $('#nam').text(name1); $('#mat').text(matricule1); $('#sal').text(salary1); $("#form1").hide(); $("#form2").show(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form1"> <div class="form-group col-md-3"> <select class="form-control"> <option> <div id="name">imad</div> <div id="matricule">22</div> <div id="salary">6000</div> </option> </select> </div> <div class="form-group col-md-offset-5 "> <button class="btn btn-success " id="hide">valider</button> </div> </div> <!--form 2--> <div id="form2"> <h4>name : <span id="nam"></span></h4> <h4>matricule : <span id="mat"></span></h4> <h4>salary : <span id="sal"></span></h4> </div> 

Answer 1

As Rory said, you cannot have HTML within an option element, this is invalid. Use a custom drop-down select library (some examples of such are here: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ )

Now, if you know the format of the data you are using to populate the select option values with (you are getting data from server side, etc.), you could then format the data on the client side with some sort of separator to create a chained together option value for the 3 different fields, like I've done in the example below using a dash ( - ). You could then split the string value of the option selected , and parse it out to individual text fields. Again, this is all dependent on how you get and format the data within the select element.

 $(document).ready(function() { $("#hide").click(function() { let selectOption = $('.form-control').val(); let optionSplits = selectOption.split('-'); let name1 = optionSplits[0]; let matricule1 = optionSplits[1]; let salary1 = optionSplits[2]; $('#nam').text(name1); $('#mat').text(matricule1); $('#sal').text(salary1); $("#form1").hide(); $("#form2").show(); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="form1"> <div class="form-group col-md-3"> <select class="form-control"> <option value="imad-22-6000">imad 22 6000</option> <option value="gupta-24-8000">gupta 24 8000</option> <option value="ganesh-27-5000">ganesh 27 5000</option> </select> </div> <div class="form-group col-md-offset-5 "> <button class="btn btn-success " id="hide">valider</button> </div> </div> <!--form 2--> <div id="form2"> <h4>name : <span id="nam"></span></h4> <h4>matricule : <span id="mat"></span></h4> <h4>salary : <span id="sal"></span></h4> </div>