設計一個選擇下拉

Question

這是一個非常簡單的問題，我找不到解決方案。我創建了一個選擇下拉菜單。但是，它看起來像兩個控件。像：

   ----------------- 
      |  ----------  | ------------ 
        | Tax |     | 
      |  ----------  | ------------ 
       ----------------- 

但我的要求是，它應該是這樣的：

   ---------- ---------- 
       | Tax |   | 
       ---------- ---------- 

第一個是選擇按鈕，第二個是空的文本框中。

這是我嘗試：

<div class="row"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
          <label class="col-sm-6">Tax Value</label> 
          <div class="col-sm-6"> 
           <div class="input-group"> 
            <div class="input-group-btn"> 
             <select type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></select> 
            </div> 
            <input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly"> 
           </div> 
          </div> 
         </div> 
        </div> 

我不知道什麼是錯的事。有人可以幫我解決這個問題嗎？

Answer 1

嘗試類似下面給出的代碼來創建自定義下拉菜單。 （根據您的要求更改CSS屬性）。

$("#timeToggler").on("click", function() 
 
    { 
 
    if($(".selectOption").is(":visible")) 
 
    { 
 
     $(".selectOption").hide(); 
 
     } 
 
    else $(".selectOption").show(); 
 
    })

.customSelect { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    border: 1px solid lightgrey; 
 
} 
 

 
.toggler 
 
{ 
 
    position:relative; 
 
    z-index:1!important; 
 
    width: auto; 
 
    padding: 0 15px; 
 
    background: #FFFFFF; 
 
    color: #797979; 
 
    display: inline-block; 
 
} 
 

 
.selectOption 
 
{ 
 
    position: absolute; 
 
    z-index: 22!important; 
 
    background: #FFFFFF; 
 
    border: 1px solid lightgrey; 
 
    margin-top: 1px; 
 
    padding: 4px 0px; 
 
    right:0px; 
 
    left:0px; 
 
    min-width:190px; 
 
} 
 
.padding15 { 
 
    padding: 0 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="customSelect"> 
 
    <span class="toggler" id="timeToggler"> 
 
     <span id="time">----</span> 
 
     <span style="margin-left:10px;display : inline-block;" class="caret"></span> 
 
    </span> 
 
    <div class="selectOption" style="display : none"> 
 
     <div class="selectOptionRow" style="display: block;"> 
 
      <span class="padding15">opt1</span> 
 
     </div> 
 
    <div class="selectOptionRow" style="display: block;"> 
 
      <span class="padding15">opt2</span> 
 
     </div> 
 
    <div class="selectOptionRow" style="display: block;"> 
 
      <span class="padding15">opt3</span> 
 
     </div> 
 
    </div> 
 
</div>