设计一个选择下拉菜单 [英] Designing a select drop-down
本文介绍了设计一个选择下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
-----------------
| ---------- | ------------
|税收| |
| ---------- | ------------
-----------------
但我的要求是，应该是这样的：
- -------- ----------
|税收| |
---------- ----------
这是我的尝试：
第一个是选择按钮，第二个是空的文本框。
< div class =row>
< div class =col-sm-6>
< div class =form-group>
< label class =col-sm-6>税额值< / label>
< div class =col-sm-6>
< div class =input-group>
< div class =input-group-btn>
< / div>
< input type =textid =invoice_request_tax_valuename =invoice_request_tax_valueclass =form-controlplaceholder =Tax Valuerequired =requiredreadonly =readonly>
< / div>
< / div>
< / div>
< / div>
我不知道什么是错的。有人可以帮我解决这个问题吗？ 解决方案
尝试类似下面给出的代码来创建自定义下拉列表。 （按您的要求更改css属性）。
$（＃timeToggler）。 （$（。selectOption）。is（：visible））{$（。selectOption）。hide（）;} else $（。selectOption）。show（）;}）
.customSelect {position：relative;显示：inline-block;光标：指针; border：1px solid lightgrey;}。toggler {position：relative;的z-index：1重要;宽度：自动;填充：0 15px;背景：#FFFFFF;颜色：＃797979; display：inline-block;}。selectOption {position：absolute; z-index：22！重要;背景：#FFFFFF; border：1px solid lightgrey; margin-top：1px; padding：4px 0px;右：0像素;左：0像素;最小宽度：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 =togglerid =timeToggler> < span id =time> ----< / span> < span style =margin-left：10px; display：inline-block;类= ^符号 >< /跨度> < /跨度> < div class =selectOptionstyle =display：none> < div class =selectOptionRowstyle =display：block;> < span class =padding15> opt1< / span> < / DIV> < div class =selectOptionRowstyle =display：block;> < span class =padding15> opt2< / span> < / DIV> < div class =selectOptionRowstyle =display：block;> < span class =padding15> opt3< / span> < / DIV> < / div>< / div>
this is a very simple issue, to which I can't find a solution. I've created a select drop-down. But, it appears like two controls. like:
-----------------
| ---------- | ------------
| Tax | |
| ---------- | ------------
-----------------
But my requirement is, it should be something like this:
---------- ----------
| Tax | |
---------- ----------
First one is a select button and the second is an empty textbox.
This is how I tried:
<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>
I don't know what's wrong. Can someone help me to fix this?
解决方案
Try something like the code given below, to create a custom drop down. (Change css property as per your requirement).
$("#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>
这篇关于设计一个选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
