引導4 Navs的下拉列表問題

林開發一些Navs的形式爲我的大學的項目，林用於[email protected] ,這是我的問題， IM選擇Book item資產淨值是IM選擇兒童items and again click the Organais`項目工作後經過反覆導航項目的詳細信息，你可以檢查它即時附加我的代碼在jsfiddle。請看看我的代碼https://jsfiddle.net/9qsacmr4/4/引導4 Navs的下拉列表問題
看圖像IM顯示一些紅色線，我的問題感謝
來源
2017-09-26 core114
這個問題是非常難以閱讀和理解，請修正格式。此外，不要共享完整的代碼，請重新創建與您的問題的最小版本，並將其張貼在問題中，而不是通過'jsfiddle' –
@BrianH。先生看看我附上的圖片 – core114
尋求代碼幫助的問題必須包括在問題本身中重現**所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。 –
看起來你的代碼中有太多重複的ID。 id屬性必須是唯一的。我用數字重命名了一些重複的ID。並刪除不需要的</div>
inputState - >inputState2和inputState3
檢查更新的jsfiddle
編輯：替換形式，內容與靜態文本。
編輯2：所有3種形式
<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>
來源
2017-09-26 10:51:45
先生，你確定它現在的工作？請您可以檢查它，首先點擊3點擊第二項後的下拉選項中，您可以看到它的重複 – core114
修正上@我的小提琴保持core114 –
先生你撥弄鏈接無法使用 – core114
工作試試這個
添加J-query腳本，並添加java script然後加入select box for drop down。 select box drop down值集main form div class。例如：<select> <option value="book">Book</option> </select><div class="book box">認沽格式這裏
檢查該鏈接如下
示例 - https://jsfiddle.net/DEVPIYUSH/98rb0xsf/
來源
2017-09-26 12:03:17
先生，請給我一些小的描述，你怎麼改變 – core114
添加jquery腳本並添加javascript，然後添加下拉選擇框。選擇框下拉值設置主窗體div類。例如：
Put Form Here
–
引導4 Navs的下拉列表問題

回答

相關問題
