每次点击都会显示所选选项的值

Question

我有一个dropdown菜单，其中列表从mysql数据库中选择，textbox包含datepicker。如何在每次点击添加按钮时显示从dropdown菜单和datepicker中选择的值？代码可以在添加按钮上动态添加div onclick，但由于dropdown javascript功能，在每个选定的onchange菜单上更改了选择显示在div中的值。

如何正确显示值？

$( ".js-datepicker" ).datepicker();

$("#choose_exam").on("change", function() {
  var selected = $(this).val();
  $("#exam").html("" + selected);
});

$("#t_exam").on("change", function() {
  var selected = $(this).val();
  $("#exam_date").html("" + selected);

})

//contents of the div added after clicking on add button in the form
$(".add-more").click(function() {
  var html = $("#copy-fields").html();
  $("#validation-step2").append(html);
  $('.js-datepicker').datepicker('update');
});

//remove button 
$("body").on("click", ".remove", function() {
  $(this).parents(".control-group").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">

  <div class="form-group">

    <select class="form-control" name="choose_exam[]" id="choose_exam">
    
<!--<?php 
$sql = "Select name from exam_list order by id asc";
$result    = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
    
      <option value="0">Please choose</option>
      <option value="1">Sample Category 1</option>
      <option value="2">Sample Category 2</option>
      <option value="3">Sample Category 3</option>
      <option value="4">Sample Category 4</option>
      <option value="5">Sample Category 5</option>
          </select>

    <label for="choose_exam">Exam List</label>

  </div>

  <div class="form-group">
    <input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
    <label for="t_exam">Date</label>
  </div>

  <div class="form-group">
    <button class="btn btn-default add-more pull-right" type="button">Add</button>
  </div>

  <!-- This is for dynamically add every div contains exam and date value upon clicking add button -->

  <div class="copy-fields hide" id="copy-fields">
    <div class="control-group">

      <div class="form-group">
        <div id="exam" name="exam[]"></div>
        <div id="exam_date" name="exam_date[]"></div>
      </div>

      <div class="form-group">
        <button class="btn btn-default remove pull-right" type="button">Delete</button>
      </div>

    </div>
  </div>

Answer 1

您的代码有几个问题：

1. 您使用HTML复制的var html = $("#copy-fields").html();包含指定了id属性的元素，这将导致您拥有一堆具有相同id的元素{ {1}}。将#exam转为.exam，将#exam_date转为.exam_date以解决此问题。

2. 然后，在change事件中，使用first()或last()，以便只有.exam和.exam_date中的第一个或最后一个触发事件时更改。在第一个代码段中，我使用last()中的$(".exam").last().html(this.value);。

3. 行$(".js-datepicker").datepicker("update");会引发错误，可能是因为您还没有设置要更新的日期。在下面的代码段中，我假设您要重置它。

代码段1：

^{（此代码段会尽可能地遵循您的代码，包括数据的实时更新＆＃39; onchange＆＃39;。）}

＆＃13;
＆＃13;
/* ----- JavaScript ----- */

/* Initialise the datepicker. */
$(".js-datepicker").datepicker();

/* Set the 'change' event. */
$("#choose_exam").on("change", function() {
  $(".exam").last().html(this.value);
});
$("#t_exam").on("change", function() {
  $(".exam_date").last().html(this.value);
})

/* Insert the given data to the DOM. */
$(".add-more").click(function() {
  /* Cache the innerHTML of the '#copy-fields'. */
  var html = $("#copy-fields").html();
  
  /* Insert it as last inside '#validation-step2'. */
  $("#validation-step2").append(html);
  
  /* Reset the 'select' element and the date picker. */
  $("#choose_exam").val(0);
  $(".js-datepicker").val("");
});

/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
  $(this).parents(".control-group").remove();
});
＆＃13;
<!----- HTML ----->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="tab-pane push-30-t push-50" id="validation-step2">
  <div class="form-group">
    <select class="form-control" name="choose_exam[]" id="choose_exam">
      <option value="0">Please choose</option>
      <option value="1">Sample Category 1</option>
      <option value="2">Sample Category 2</option>
      <option value="3">Sample Category 3</option>
      <option value="4">Sample Category 4</option>
      <option value="5">Sample Category 5</option>
    </select>
    <label for="choose_exam">Exam List</label>
  </div>
  <div class="form-group">
    <input class="js-datepicker form-control" type="text" name="t_exam"
      id="t_exam" data-date-format="dd/mm/yyyy">
    <label for="t_exam">Date</label>
  </div>
  <div class="form-group">
    <button class="btn btn-default add-more pull-right" type="button">Add</button>
  </div>

  <!-- This is for dynamically add every div contains exam and date
  value upon clicking add button -->

  <div class="copy-fields hide" id="copy-fields">
    <div class="control-group">
      <div class="form-group">
        <div class="exam" name="exam[]"></div>
        <div class="exam_date" name="exam_date[]"></div>
      </div>
      <div class="form-group">
        <button class="btn btn-default remove pull-right" type="button">Delete</button>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

代码段2：

^{（此代码段提供了一种使用模板将数据添加到DOM的替代方法。）}

＆＃13;
＆＃13;
/* ----- JavaScript ----- */

/* Create a template. */
var template = `
  <div class="control-group">
      <div class="form-group">
        <div class="exam" name="exam[]">[_EXAM_]</div>
        <div class="exam_date" name="exam_date[]">[_DATE_]</div>
      </div>
      <div class="form-group">
        <button class="btn btn-default remove pull-right" type="button">Delete</button>
      </div>
    </div>
`;

/* Initialise the datepicker. */
$(".js-datepicker").datepicker();

/* Insert the given data to the DOM. */
$(".add-more").click(function() {
  /* Cache the data. */
  var
    exam = $("#choose_exam").val(),
    date = $("#t_exam").val(),
    editedTemplate = template.replace("[_EXAM_]", exam).replace("[_DATE_]", date);
  
  /* Insert it as last inside '#validation-step2'. */
  $("#validation-step2").append(editedTemplate);
  
  /* Reset the 'select' element and the date picker. */
  $("#choose_exam").val(0);
  $(".js-datepicker").val("");
});

/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
  $(this).parents(".control-group").remove();
});
＆＃13;
<!----- HTML ----->

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="tab-pane push-30-t push-50" id="validation-step2">
  <div class="form-group">
    <select class="form-control" name="choose_exam[]" id="choose_exam">
      <option value="0">Please choose</option>
      <option value="1">Sample Category 1</option>
      <option value="2">Sample Category 2</option>
      <option value="3">Sample Category 3</option>
      <option value="4">Sample Category 4</option>
      <option value="5">Sample Category 5</option>
    </select>
    <label for="choose_exam">Exam List</label>
  </div>
  <div class="form-group">
    <input class="js-datepicker form-control" type="text" name="t_exam"
      id="t_exam" data-date-format="dd/mm/yyyy">
    <label for="t_exam">Date</label>
  </div>
  <div class="form-group">
    <button class="btn btn-default add-more pull-right" type="button">Add</button>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

所以我更愿意在这个答案下讨论你的问题，因为我仍然觉得有些不对劲，我不清楚你想要做什么，但是你可以得到#t_exam单击“添加”按钮后显示#choose_exam值。它还会动态地将选定的值添加到html，但稍加更改。

＆＃13;

＆＃13;

$(".js-datepicker").datepicker();

$(".add-more").click(function() {

  var selectedExam = $('#choose_exam option:selected').val();
  var selectedDate = $('#t_exam').val();

  var html = '<div class="control-group">'+
  '<div class="form-group">'+
  '<div class="exam" name="exam[]">'+selectedExam+'</div>'+
  '<div class="exam_date" name="exam_date[]">'+selectedDate+'</div></div>'+
  '<div class="form-group">'+
  '<button class="btn btn-default remove pull-right" type="button">Delete</button>'+
  '</div></div>'
  ;
  
  $("#copy-fields").append(html);
 // $('.js-datepicker').datepicker('update');
});

//remove button 
$("body").on("click", ".remove", function() {
  $(this).parents(".control-group").remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">

  <div class="form-group">

    <select class="form-control" name="choose_exam[]" id="choose_exam">
    
<!--<?php 
$sql = "Select name from exam_list order by id asc";
$result    = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
    
      <option value="0">Please choose</option>
      <option value="1">Sample Category 1</option>
      <option value="2">Sample Category 2</option>
      <option value="3">Sample Category 3</option>
      <option value="4">Sample Category 4</option>
      <option value="5">Sample Category 5</option>
          </select>

    <label for="choose_exam">Exam List</label>

  </div>

  <div class="form-group">
    <input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
    <label for="t_exam">Date</label>
  </div>

  <div class="form-group">
    <button class="btn btn-default add-more pull-right" type="button">Add</button>
  </div>

  <!-- This is for dynamically add every div contains exam and date value upon clicking add button -->

  <div class="copy-fields hide" id="copy-fields"></div>

＆＃13;

＆＃13;

＆＃13;