Bootstrap 4 Navs Dropdown-Liste Ausgabe

Im einige Navs Formen für meine Universität Projekte entwickeln, verwenden Im für [email protected] , Das ist mein Problem, ausgewählt im Book item navs ist Kind items and again click the Organais` Produkt nach dem im gewählten Arbeits nach wiederholtem Navs Artikel Details, können Sie es im Anhang meinen Code in jfiddle angehakt. schauen Sie bitte in meinem Code https://jsfiddle.net/9qsacmr4/4/Bootstrap 4 Navs Dropdown-Liste Ausgabe

Blick auf Bild im angezeigten etwas rote Farbe Linie in meiner Ausgabe Dank

Quelle

2017-09-26 core114

Diese Frage extrem schwer zu lesen und zu verstehen, benutzen Sie bitte die Formatierung beheben. Anstatt den vollen Code zu teilen, erstellen Sie bitte eine minimale Version mit Ihrem Problem und posten Sie sie in der Frage anstatt über 'jsfiddle' –

@BrianH. Sehen Sie sich das Bild an – core114

Fragen, die Hilfe zum Code suchen, müssen den kürzesten Code enthalten, der für die Reproduktion notwendig ist ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com)/2014/09/Einführung-Runnable-Javascript-CSS-und-HTML-Code-Snippets /). –

Sieht aus wie Sie Ihren Code zu viele id wiederholt hat. Das ID-Attribut muss eindeutig sein. Ich habe einige Ihrer wiederholten ID mit Nummer umbenannt. und entfernt unerwünschte </div>

eingabe ->inputState2 und inputState3

prüfen aktualisiert jsfiddle

EDIT: Ersetzt Formularinhalt mit statischem Text.

EDIT 2:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="content-wrapper"> 
 
    <div class="container-fluid"> 
 
    
 
    <!-- section-two--> 
 
    <div class="agrarian-section-addnewaccount" style="margin-top: -0.5rem;"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <ul class="nav nav-tabs" id="myTab" role="tablist"> 
 
      <li class="nav-item dropdown"> 
 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Select Your Account Type </a> 
 
       <div class="dropdown-menu"> 
 
       <a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">Book</a> 
 
       <a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">Organais</a> 
 
       <a class="dropdown-item" id="pills-dropdown3-tab" href="#pills-dropdown3" role="tab" data-toggle="pill" aria-controls="pills-dropdown3">Child</a> 
 
       </div> 
 
      </li> 
 
      </ul> 
 
      
 
      <!-- tab section--> 
 
      <div class="tab-content" id="myTabContent"> 
 
      <div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">    
 
       <!-- tab section head-->    
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item"> 
 
         <p class="WD-txt-hd">Individual Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div>    
 
       <!-- tab section head-->    
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputAccNum" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputGivName" class="col-form-label">Given Name</label> 
 
          <input type="text" class="form-control" id="inputGivName" placeholder="Given Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSurName" class="col-form-label">Sure Name</label> 
 
          <input type="text" class="form-control" id="inputSurName" placeholder="Sure Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOthName" class="col-form-label">Other Name</label> 
 
          <input type="text" class="form-control" id="inputOthName" placeholder="Other Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputInd-DOB" class="col-form-label">Date of Birth</label> 
 
          <div class="input-group input-append date" id="datePicker-IndDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="DOB" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputGENDER" class="col-form-label">Gender</label> 
 
          <br> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="radio1" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="radio2" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputNIC" class="col-form-label">NIC </label> 
 
          <input type="text" class="form-control" id="inputNIC" placeholder="NIC"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputADD" class="col-form-label">Residential Address</label> 
 
          <textarea class="form-control" id="exampleFormControlTextarea1" rows="1" placeholder="Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState" class="col-form-label">State</label> 
 
          <select id="inputState" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label">Zip</label> 
 
          <input type="text" class="form-control" id="inputZip"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputMobile" class="col-form-label">Mobile</label> 
 
          <input type="text" class="form-control" id="inputMobile" placeholder="Mobile"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputTeli" class="col-form-label">Teliphone</label> 
 
          <input type="text" class="form-control" id="inputTeli" placeholder="Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre" class="col-form-label">Services Centre</label> 
 
          <select id="inputStatetwo" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab"> 
 
       <!-- tab section head--> 
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item active"> 
 
         <p class="WD-txt-hd">Organaisational Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div> 
 
       
 
       <!-- tab section head--> 
 
       
 
       <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputOrgAccNum" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgName" class="col-form-label">Organisation Name</label> 
 
          <input type="text" class="form-control" id="inputOrgName" placeholder="Organisation Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgOpenerName" class="col-form-label">Account Opener Name</label> 
 
          <input type="text" class="form-control" id="inputOrgOpenerName" placeholder="Account Opener Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgOpenrMobile" class="col-form-label">Account Opener Mobile</label> 
 
          <input type="text" class="form-control" id="inputOrgOpenrMobile" placeholder="Account Opener Mobile"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgDOB" class="col-form-label">Organisation Started Date</label> 
 
          <div class="input-group input-append date" id="datePicker-OrgDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="Organisation Started Date" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgStatus" class="col-form-label">Organisation Status</label> 
 
          <input type="text" class="form-control" id="inputOrgStatus" placeholder="Organisation Status"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgRegNumber" class="col-form-label">Organisation Reg: Number </label> 
 
          <input type="text" class="form-control" id="inputOrgRegNumber" placeholder="Organisation Reg: Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgADD" class="col-form-label">Organisation Address</label> 
 
          <textarea class="form-control" id="OrgADD" rows="1" placeholder="Organisation Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity2"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState2" class="col-form-label">State</label> 
 
          <select id="inputState2" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label"> Zip </label> 
 
          <input type="text" class="form-control" id="inputZip" /> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOegEmail" class="col-form-label"> Organisation Email </label> 
 
          <input type="email" class="form-control" id="inputOrgEmail" placeholder="Organisation Email"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgTeli" class="col-form-label"> Teliphone </label> 
 
          <input type="text" class="form-control" id="inputOrgTeli" placeholder="Organisation Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre" class="col-form-label"> Services Centre </label> 
 
          <select id="inputStatetwo2" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane fade" id="pills-dropdown3" role="tabpanel" aria-labelledby="pills-dropdown3-tab"> 
 
       
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <ol class="breadcrumb"> 
 
        <li class="breadcrumb-item active"> 
 
         <p class="WD-txt-hd">Children Account</p> 
 
        </li> 
 
        </ol> 
 
       </div> 
 
       </div> 
 
       
 
      <div class="row"> 
 
       <div class="col-sm-12"> 
 
        <div class="card"> 
 
        <form> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputOrgAccNum" class="col-form-label">Account Number</label> 
 
          <input type="text" class="form-control" id="inputOrgAccNum2" placeholder="Account Number"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGivName" class="col-form-label">Given Name</label> 
 
          <input type="text" class="form-control" id="inputChildGivName" placeholder="Given Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildOpenerName" class="col-form-label">Sure Name</label> 
 
          <input type="text" class="form-control" id="inputChildOpenerName" placeholder="Sure Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildOpenrOther" class="col-form-label">Other Name</label> 
 
          <input type="text" class="form-control" id="inputChildOpenrOther" placeholder="Other Name"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildDOB" class="col-form-label">Date Of Birth</label> 
 
          <div class="input-group input-append date" id="datePicker-ChildDOB" > 
 
          <input type="text" class="form-control" name="date" value="" placeholder="DOB" /> 
 
          <span class="input-group-addon add-on"> <i class="fa fa-calendar" aria-hidden="true"></i> </span> </div> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGENDER" class="col-form-label">Gender</label> 
 
          <br> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="Childradio1" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Male</span> </label> 
 
          <label class="custom-control custom-radio"> 
 
          <input id="Childradio2" name="radio" type="radio" class="custom-control-input"> 
 
          <span class="custom-control-indicator"></span> <span class="custom-control-description">Female</span> </label> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildADD" class="col-form-label">Residential Address</label> 
 
          <textarea class="form-control" id="ChildADD" rows="1" placeholder="Residential Address"></textarea> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputCity" class="col-form-label">City</label> 
 
          <input type="text" class="form-control" id="inputCity3"> 
 
         </div> 
 
         <div class="form-group col-md-4"> 
 
          <label for="inputState3" class="col-form-label">State</label> 
 
          <select id="inputState3" class="form-control"> 
 
          <option selected>Select your state</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         <div class="form-group col-md-2"> 
 
          <label for="inputZip" class="col-form-label">Zip</label> 
 
          <input type="text" class="form-control" id="inputZip2"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildMobie" class="col-form-label">Mobile</label> 
 
          <input type="Text" class="form-control" id="inputChildMobile" placeholder="Mobile"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildTeli" class="col-form-label">Teliphone</label> 
 
          <input type="text" class="form-control" id="inputChildTeli" placeholder="Teliphone"> 
 
         </div> 
 
         </div> 
 
         <div class="form-row"> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputChildGuardianName" class="col-form-label">Guardian Name</label> 
 
          <input type="text" class="form-control" id="inputChildGuardianName" placeholder="Guardian Name"> 
 
         </div> 
 
         <div class="form-group col-md-6"> 
 
          <label for="inputSrvCentre2" class="col-form-label">Services Centre</label> 
 
          <select id="inputStatetwoe2" class="form-control"> 
 
          <option selected>Select your Services Centre</option> 
 
          <option value="1">One</option> 
 
          <option value="2">Two</option> 
 
          <option value="3">Three</option> 
 
          <option value="4">Four</option> 
 
          <option value="5">Five</option> 
 
          <option value="6">Six</option> 
 
          <option value="7">Seven</option> 
 
          <option value="8">Eight</option> 
 
          <option value="9">Nine</option> 
 
          <option value="10">Ten</option> 
 
          </select> 
 
         </div> 
 
         </div> 
 
         <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="">Submit</button> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       
 
      </div> 
 
      </div> 
 
      
 
      <!-- /tab section--> 
 
      
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-09-26 10:51:45

Sir, sind Sie sicher, dass es jetzt funktioniert? Bitte überprüfen Sie es, klicken Sie zuerst auf 3. Drop-Down-Element nach dem Klicken 2. Element können Sie sehen, wiederholt – core114

Korrektur meiner Geige halten @ core114 –

sir Ihre Fiddle-Link funktioniert nicht – core114

Versuchen Sie, diese

hinzufügen J-query Skript und fügen java script fügen Sie dann select box for drop down mit allen drei Formen zu arbeiten. select box drop down Wertsatz main form div class. Beispiel: <select> <option value="book">Book</option> </select><div class="book box"> Put-Formular Hier

prüft diesen Link unten

Beispiel - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/

Quelle

2017-09-26 12:03:17

Herr, bitte geben Sie mir eine kleine Beschreibung, was haben Sie geändert – core114

Fügen Sie Jquery-Skript und fügen Sie Javascript hinzu und fügen Sie dann ein Auswahlfeld für das Dropdown-Menü hinzu. Auswahlfeld Dropdown-Wert festlegen Hauptform div-Klasse. Beispiel:

Put Form Here

–

Bootstrap 4 Navs Dropdown-Liste Ausgabe

Antwort

Verwandte Themen