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

Question

我有兩個選擇選項和一個按鈕驗證，第一個按城市，國家和地區填寫，第二個按名稱，數字和薪水填寫，我想當我單擊按鈕時驗證以顯示上述第二個選擇的數據：name ：注冊號碼：薪水：但在我的情況下，它顯示第一個選擇數據。

  $(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="city1-country1-color1">city1 country1 color1</option> <option value="city2-country2-color2">city2 country2 color2</option> <option value="city3-country3-color3">city3 country3 color3</option> </select> </div> <div class="form-group col-md-3"> <select class="form-control"> <option value="name1-22-6000">name1 22 6000</option> <option value="name2-24-8000">name2 24 8000</option> <option value="name3-27-5000">name3 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> 

Answer 1

因為您使用了與兩個選擇都匹配的選擇器.form-control 。 您應該將id添加到第二選擇中，並使用該id獲得價值。

 $(document).ready(function() { $("#hide").click(function() { let selectOption = $('#second_select').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="city1-country1-color1">city1 country1 color1</option> <option value="city2-country2-color2">city2 country2 color2</option> <option value="city3-country3-color3">city3 country3 color3</option> </select> </div> <div class="form-group col-md-3"> <select class="form-control" id="second_select"> <option value="name1-22-6000">name1 22 6000</option> <option value="name2-24-8000">name2 24 8000</option> <option value="name3-27-5000">name3 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>