社区首页 >问答首页 >如何分离和显示选择选项数据？

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

Stack Overflow用户

提问于 2019-07-05 08:01:47

回答 1查看 30关注 0票数 0

我有两种表格。form1的内容是一个选项，由名称、招生和薪水填充，还有一个验证按钮，该按钮隐藏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>

javascript

jquery

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-05 11:16:37

正如罗里所说，在选项元素中不能有HTML，这是无效的。使用自定义下拉选择库(此类示例如下：https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/)

现在，如果您知道用于填充select option values的数据格式(您从服务器端获取数据，等等)，那么您可以使用某种分隔符对客户端的数据进行格式化，以便为这3个不同的字段创建一个链接的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>