2
我想使這樣的選擇輸入,我已經設計了UI 我試圖在谷歌搜索,如何建立它的代碼和許多人似乎使用下拉的CSS與UL和李。造型選擇下拉與獨特的佈局
有什麼辦法來建立這種設計與選擇標記,或者如果我必須使用下拉菜單裏如何構建列表像選擇功能。
我想使這樣的選擇輸入,我已經設計了UI 我試圖在谷歌搜索,如何建立它的代碼和許多人似乎使用下拉的CSS與UL和李。造型選擇下拉與獨特的佈局
有什麼辦法來建立這種設計與選擇標記,或者如果我必須使用下拉菜單裏如何構建列表像選擇功能。
您可以按如下方式模擬選擇下拉菜單。
我假設你使用這種形式。該代碼包含一個隱藏的輸入元素,它將獲得所選的值。
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>
非常感謝您的答案@傑拉德,虐待嘗試它 –
我已經嘗試@gerard答案,它是一個好一個,但是如果你們想用選擇輸入做到這一點,並知道如何做到這一點,這將是誰抓住了其他人有幫助在與我相同的問題,我認爲,感謝您的幫助球員 –