如何分离和显示选择选项数据？

Question

我有两种形式。 form1的内容是一个由名称，矩阵和薪水填充的选择选项，还有一个按钮validate，它隐藏form1并显示form2 。 我想要当我单击按钮时， select的内容分开并显示如下：

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

正如罗里所说，您不能在option元素中包含HTML ，这是无效的。 使用自定义的下拉选择库（此处提供了一些示例： https : //www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ ）

现在，如果您知道用来填充select option values的数据格式（您正在从服务器端获取数据，等等），则可以在客户端使用某种分隔符格式化数据以创建三个不同字段的链接在一起的option value ，就像我在下面的示例中使用破折号（ - ）所做的那样。 然后，您可以拆分option selected的字符串值，并将其解析为单个文本字段。 同样，这都取决于您如何在select元素中获取和格式化数据。

 $(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>