Question

这是我的小提琴：

https://jsfiddle.net/harshithanaidu1991/6vx7ej9d/

我已将默认选择下拉值设为“单一占用率”，但更改下拉选项时表格未显示，只有表格即将到来。如何根据下拉列表中的第一个值显示默认的一个表。

这是我的javascript代码：

      $(document).ready(function(){
  $('#amount').change(function(){
  $('#groups').empty();
  var group = '';
  var number = parseInt($(this).val());
  for(var i=1;i<=number;i++){
   group += '<div id="group">' +
    '<h1 style=" font-size: 14px;color: rgb(0, 0, 0);"><u>GUEST DETAILS : '+i+'</u></h1>'+
   '<table class="tabpasdding" width="100%" style="border:1px solid #ccc;">'+
          '<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />'+
          '<tr>'+
            '<td width="50%" align="left">'+
                '<table width="100%" align="left">'+


   '<tr>'+
     '<td ><label>Full Name <span style="color:red">*</span></label></td>'+
     '<td ><input type="text" id="pname'+i+'" name="pname'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
   '</tr>'+

    '<tr>'+
    '<td ><label>Passport Number <span style="color:green">#</span> </label></td>'+
     '<td ><input type="text" name="ppassport'+i+'" id="ppassport'+i+'" class="form-control"  autocomplete="off" onkeydown="testForEnter();"></td>'+
   '</tr>'+

  '</table>'+
            '</td>'+
            '<td width="50%" align="right">'+
                '<table width="100%" align="right">'+

  '<tr><td><label class="">Check In Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
                   '<input class="form-control" size="16" type="text" value="" id="checkindatetime'+i+'" name="checkindatetime'+i+'">'+
                   '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
         '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
               '</div> </td></tr>'+
  '<tr><td><label>Check Out Date & Time </label></td><td>  <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
                   '<input class="form-control" size="16" type="text" value="" id="checkoutdatetime'+i+'" name="checkoutdatetime'+i+'">'+
                   '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
         '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
               '</div> </td></tr>'+


  '</table>'+
            '</td>'+
          '</tr>'+

  '</table>' +
  '    <p>&nbsp;</p>'+

   '</div>';
   }
   $('#groups').append(group);
  });
  });

这是我的HTML代码：

   <table class="tabpasdding" width="100%">
        <tr>
          <td><label>Select Preference :</label> </td>
          <td>
            <select id="amount">

              <option value="1" selected>One Single Occupancy</option>
              <option value="2">Two Single Occupancy</option>
              <option value="2">One Double Occupancy</option>
              <option value="4">Two Double Occupancy</option>
              <option value="3">One Single & One Double Occupancy</option>
            </select>
          </td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <div id="groups">
      </div>

你可以在这里查看小提琴：

https://jsfiddle.net/harshithanaidu1991/9hbnLky0/13/

请帮帮我

Answer 1

请尝试下面的代码段。创建一个函数，根据所选的下拉数量生成HTML。并将该函数放在下拉列表的更改事件中，以便在下拉列表值更改时生成HTML。并且当文件加载HTML时，相同的函数放入document.ready将根据默认选择的下拉值生成。

＆＃13;

$(document).ready(function(){
	//by default generate html based on the default selected value.
  $('#groups').empty();    
  var number = parseInt($("#amount").val());
  createHTML(number);
  
  $('#amount').change(function(){
    $('#groups').empty();    
    number = parseInt($(this).val());
    createHTML(number);
  });
});

function createHTML(number){
	var group = '';
  for(var i=1;i<=number;i++){
    group += '<div id="group">' +
      '<h1 style=" font-size: 14px;color: rgb(0, 0, 0);"><u>GUEST DETAILS : '+i+'</u></h1>'+
      '<table class="tabpasdding" width="100%" style="border:1px solid #ccc;">'+
      '<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />'+
      '<tr>'+
      '<td width="50%" align="left">'+
      '<table width="100%" align="left">'+


      '<tr>'+
      '<td ><label>Full Name <span style="color:red">*</span></label></td>'+
      '<td ><input type="text" id="pname'+i+'" name="pname'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
      '</tr>'+

      '<tr>'+
      '<td ><label>Passport Number <span style="color:green">#</span> </label></td>'+
      '<td ><input type="text" name="ppassport'+i+'" id="ppassport'+i+'" class="form-control"  autocomplete="off" onkeydown="testForEnter();"></td>'+
      '</tr>'+

      '</table>'+
      '</td>'+
      '<td width="50%" align="right">'+
      '<table width="100%" align="right">'+

      '<tr><td><label class="">Check In Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
      '<input class="form-control" size="16" type="text" value="" id="checkindatetime'+i+'" name="checkindatetime'+i+'">'+
      '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
      '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
      '</div> </td></tr>'+
      '<tr><td><label>Check Out Date & Time </label></td><td>  <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
      '<input class="form-control" size="16" type="text" value="" id="checkoutdatetime'+i+'" name="checkoutdatetime'+i+'">'+
      '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
      '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
      '</div> </td></tr>'+


      '</table>'+
      '</td>'+
      '</tr>'+

      '</table>' +
      '    <p>&nbsp;</p>'+
      //       '<p style="color:#000000;font-weight:bold;text-transform:uppercase"><input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">'+
      // ' Check this box if check in and check out Details same</p>'+
      '</div>';
  }
  $('#groups').append(group);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tabpasdding" width="100%">
            <tr>
              <td><label>Select Preference :</label> </td>
              <td>
                <select id="amount">
               
                  <option value="1" selected>One Single Occupancy</option>
                  <option value="2">Two Single Occupancy</option>
                  <option value="2">One Double Occupancy</option>
                  <option value="4">Two Double Occupancy</option>
                  <option value="3">One Single & One Double Occupancy</option>
                </select>
              </td>
            </tr>
          </table>
          <p>&nbsp;</p>
          <div id="groups">
          </div>

＆＃13;

Answer 2

将您的代码放在以下函数中：

function generateDetails()
{
......
}

call it on document on load and call the same on 

$('#amount').change(function(){
  generateDetails();
});

Answer 3

因此要解决此问题，您需要在代码中使用触发器功能。它将运行一次更改功能而不会更改。我已经更新了你的jsfiddle。改变功能后写下这个：

        $('#groups').append(group);
                             });$('#amount').trigger("change");

基于jquery下拉列表的多个字段

3 个答案: