Mehrere Felder basierend auf Dropdown in jquery

Hier ist meine Geige:Mehrere Felder basierend auf Dropdown in jquery

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

i gegeben haben Standard auswählen unten Wert fallen als ‚One Einzelzimmer‘ aber die Tabelle zeigt, ist nicht, wenn die Abfalländerung nach unten Option dann kommt nur die Tabelle. Wie mache ich eine Standardtabelle nach dem ersten Wert aus der Dropdownliste anzuzeigen.

Hier ist mein Javascript-Code:

 $(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); 
    }); 
    });

Und hier ist mein HTML-Code:

<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>

Sie die Geige hier überprüfen:

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

Bitte helfen Sie mir

Quelle

2016-08-01 06011991

Sie haben die „#groups“ div erste und fügen Sie die Tabelle mit dem Wert (i = 1 in Ihrem Fall) anhängen, bevor Sie in der Änderungsfunktion gehen –

Bitte versuchen Sie b ein Schnipsel. Erstellt eine Funktion zum Generieren von HTML basierend auf der ausgewählten Nummer des Dropdown-Menüs. Und diese Funktion wurde im Änderungsereignis des Dropdown-Menüs platziert, um HTML zu generieren, wenn sich Dropdown-Werte ändern. Und die gleiche Funktion wird in document.ready eingefügt, wenn die Seite geladen wird, wird der HTML-Code basierend auf dem standardmäßig ausgewählten Dropdown-Wert generiert.

$(document).ready(function(){ 
 
\t //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){ 
 
\t 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); 
 
}

<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>

Quelle

2016-08-01 10:51:45

Es funktionierte perfekt ..Aber mein Datumswähler kommt nicht für das Feld Check-in Datum & Uhrzeit. .. @ Rahul Patel – 06011991

Danke, ich bekomme dich nicht. Sie möchten Datumsanzeige für die Eingabe von Datum und Uhrzeit? –

Ja .. mit JavaScript Datumsauswahl kam, sobald ich dies mit JavaScript gemacht, dann verschwindet Datumsauswahl. – 06011991

Setzen Sie Ihren Code in einer Funktion wie:

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

call it on document on load and call the same on 

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

Quelle

2016-08-01 10:55:06

Also, für dieses Problem, das Sie Trigger-Funktion in Ihrem Code müssen beheben verwenden. Es wird einmal Wechselfunktion ohne Änderung ausgeführt. Ich habe deine Datei aktualisiert. Nach Funktion Abwertungs Änderung folgt aus:

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

Quelle

2016-08-01 11:00:41

Mehrere Felder basierend auf Dropdown in jquery

Antwort

Verwandte Themen