如何分離和顯示選擇選項數據？

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>