Question

我有两种形式。 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>

Answer 1

正如罗里所说，在选项元素中不能包含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>

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

1 个答案: