選択ドロップダウンを設計する

Question

これは解決策が見つからない非常に単純な問題です。私は選択ドロップダウンを作成しました。しかし、それは2つのコントロールのように見えます。以下のような：

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