如何显示单独选择的数据?

时间:2019-07-04 16:52:34

标签: jquery

我有一个包含姓名,身份证和薪水的选择,我想分别显示这些数据。 我有一个包含姓名,身份证和薪水的选择,我想分别显示这些数据

<div id="form1">

    <div class="form-group col-md-3" id=info>
          <select class="form-control" name="situationf">
              <option>najib 22 6000</option>
              <option>rachida 88 7000</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="inf"></span></h4>
    <h4>id : <span id="inf"></span></h4>
    <h4>salary : <span id="inf"></span></h4>
</div>

jQuery代码 jQuery代码

<script type="text/javascript">
     $(document).ready(function(){
         $("#hide").click(function(){
            let valu2 = $('#info option:selected').html();
             $('#inf').text(valu2);
             $("#form1").hide();
            $("#form2").show();
          });
 });

1 个答案:

答案 0 :(得分:1)

希望此代码可以正常工作。

$(document).ready(function() {
  $("#hide").click(function() {
    let valu2 = $('#info option:selected').html();
    valu2 = valu2.split(' ');
    $('#name').text(valu2[0]);
    $('#id').text(valu2[1]);
    $('#salary').text(valu2[2]);
    $("#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" id=info>
    <select class="form-control" name="situationf">
      <option>najib 22 6000</option>
      <option>rachida 88 7000</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="name"></span></h4>
  <h4>id : <span id="id"></span></h4>
  <h4>salary : <span id="salary"></span></h4>
</div>