我有一个非常定制的设计要求所以我必须创建一个自定义选择而不是使用传统的选择。
我设计了选择和集成几乎每个功能只有我面临的最后一个场景因为我们知道当我们从常规选择它关闭时选择一个选项，每当我们重新打开选择它总是聚焦所选项目，甚至如果在重新打开选择后向上滚动，它将始终专注于所选项目。
我已经制作了类似的场景，当我单击我的自定义选择列表打开时，当我点击一些孩子时它会突出显示并关闭，现在如果我重新打开我的情况下的选择它会关注当前选择项目默认也许是因为那是最后点击的项目，之后没有操作但是如果上下移动我的滚动并关闭自定义选择然后重新打开它就不再关注突出显示的项目，这就出现了问题，因为也许最后一次操作是滚动所以当它关闭时它会在那一点停止并从那里开始点击。
摘要
我想在列表中搜索所选项目并将其集中，以便每当下拉列表打开时，它都会将视口带到所选项目，这是代码。
// select snippet
$(".select-options").html("");
$(".select").on("click", function () {
//this is the part where i need to take the viewport to the selected item
$(this).find("li.selected").focus();
//this is the part where i need to take the viewport to the selected item
$(".select").not($(this)).removeClass("focus");
$(".select").not($(this)).removeClass("overflow-auto");
$(this).toggleClass("overflow-auto");
if ($(this).hasClass("focus")) {
$(this).removeClass("focus");
} else
{
$(this).addClass("focus");
}
$(".select .select-options").not($(this).children(".select-options")).removeClass("active");
$(".select").not($(this)).removeClass("border-bottom-zero");
if ($(this).hasClass("border-bottom-zero"))
{
$(this).removeClass("border-bottom-zero");
} else
{
$(this).addClass("border-bottom-zero");
}
if ($(this).children(".select-options").hasClass("active")) {
$(this).children(".select-options").removeClass("active");
} else
{
$(this).children(".select-options").addClass("active");
}
});
$(".select select > option").each(function () {
$(this).parents(".select").find(".select-options").append("<li class='" + this.value + "'>" + this.text + "</li>");
});
$(".select-options li").click(function () {
$(this).parents(".select-options").children("li").removeClass("selected");
$(this).addClass("selected");
$(this).parents(".select").find("h5").text($(this).text());
$(this).parents(".select").find("select").val($(this).attr("class"));
});
$(".select-mileage .icons").on("click", function () {
if ($(this).parent().hasClass("border-left-bottom-zero"))
{
$(this).parent().removeClass("border-left-bottom-zero");
} else
{
$(this).parent().addClass("border-left-bottom-zero");
}
$(this).parent().find(".mileage-select-options").toggleClass("active");
});
$(".select-mileage li").click(function () {
$(this).parents(".select-mileage").find("h6").text($(this).text())
$("#km-or-mi").val($(this).text());
$(this).parent().removeClass("active");
$(this).parents(".fields").removeClass("border-left-bottom-zero");
});
$(".fields").focusout(function () {
$(this).removeClass("focus");
});
// select snippet .select{
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select::before{
content: url("../images/caret-down.png");
position: absolute;
right: 20px;
top: 17px;
}
.select select{
visibility: hidden;
}
.select .select-options{
position: absolute;
top: 101%;
background-color: white;
width: calc(100% - 63px);
z-index: 1;
left: 64px;
border: 1px solid #dcdee3;
border-top: 0;
visibility: hidden;
padding: 10px 0;
}
.select .active{
visibility: visible;
}
.select .active .selected{
background-color: #dcdee3;
}
.select .select-options li{
display: block;
width: 100%;
/*border-bottom: 1px solid #dcdee3;*/
color: #484848;
font-family: 'Poppins', sans-serif;
font-weight:400;
list-style: none;
font-size: 14px;
padding: 28px;
padding-top: 15px;
padding-bottom: 10px;
position: relative;
}
.select .select-options li::before{
position: absolute;
left: 28px;
bottom: 0;
content: "";
height: 1px;
background-color: #dcdee3;
width: calc(100% - 63px);
}
.fields{
border: 1px solid #dcdee3;
width: 85%;
margin-right: 98px;
display: inline-block;
position: relative;
height: 60px;
border-radius: 9px;
vertical-align: top;
box-shadow: 0px 0px 10px 6px rgba(251, 251, 252, 0.75);
transition: box-shadow 0.3s ease-in-out , border 0.3s ease-in-out;
overflow: hidden;
}
.overflow-auto{
overflow: initial;
}
.fields img{
position: absolute;
top: 50%;
transform: translate(-50% , -50%);
left: 50%;
}
.fields .icons{
border-right: 1px solid #dcdee3;
height: 100%;
width: 65px;
display: inline-block;
position: relative;
}
.fields input , .fields h5{
border: 0;
display: inline-block;
vertical-align: top;
padding-left: 26px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
width: 76%;
margin-top: 22px;
}
.focus{
border-color: #53a6fa;
box-shadow: 0px 0px 4px .2rem rgba(83,166,250,.25);
transition: box-shadow 0.3s ease-in-out , border 0.3s ease-in-out;
}
input:focus{
outline-width: 0;
}
.fields span{
position: absolute;
left: 86px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #e35959;
top: 24px;
}
.fields input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
}
.fields input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
opacity: 1;
font-size: 14px;
}
.fields input::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
opacity: 1;
font-size: 14px;
}
.fields input:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
}
.fields input , .fields h5{
border: 0;
display: inline-block;
vertical-align: top;
padding-left: 26px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
width: 76%;
margin-top: 22px;
}
.select .select-options {
top: 102%;
max-height: 250px;
overflow-y: auto;
}
position: absolute;
top: 101%;
background-color: white;
width: calc(100% - 63px);
z-index: 1;
left: 64px;
border: 1px solid #dcdee3;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(220, 222, 227);
border-top: 0;
visibility: hidden;
padding: 10px 0;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields select" id="category">
<div class="icons">
<img src="http://localhost/dealercarpages_laravel/public/assets-dealer/images/car.png">
</div>
<h5>Enter Category</h5>
<span>*</span>
<div class="select-options">
<li class="9">Convertible</li>
<li class="10">Coupe</li>
<li class="11">Hatchback</li>
<li class="12">Sedan</li>
<li class="13">Wagon</li>
<li class="14">Minivan / Van</li>
<li class="15">SUV / Crossover</li>
<li class="16">Truck / Pickup</li>
<li class="17">Commercial / Cargo / Bus</li>
<li class="18">Motorcycle / Scooter</li>
<li class="19">Wheelchair Accessible</li>
<li class="20">Atv</li><li class="21">Boat</li>
<li class="22">RV</li><li class="23">Snowmobile</li>
<li class="24">Trailer</li><li class="25">Types</li>
<li class="26">Was</li></div>
<p class="error" style="display: none;">This Value is Required</p>
<select name="category">
<option value="9">Convertible</option>
<option value="10" selected="">Coupe</option>
<option value="11">Hatchback</option>
<option value="12">Sedan</option>
<option value="13">Wagon</option>
<option value="14">Minivan / Van</option>
<option value="15">SUV / Crossover</option>
<option value="16">Truck / Pickup</option>
<option value="17">Commercial / Cargo / Bus</option>
<option value="18">Motorcycle / Scooter</option>
<option value="19">Wheelchair Accessible</option>
<option value="20">Atv</option>
<option value="21">Boat</option>
<option value="22">RV</option>
<option value="23">Snowmobile</option>
<option value="24">Trailer</option>
<option value="25">Types</option>
<option value="26">Was</option>
</select>
</div>
答案 0 :(得分：1)
如果我正确理解您的要求，您可以计算未选中li的高度和scrollTop()到身高的高度。
// select snippet
$(".select-options").html("");
$(".select").on("click", function() {
//this is the part where i need to take the viewport to the selected item
let $li = $(this).find("li.selected")
let index = $li.index() // find the index of the selected li
let height = $li.outerHeight() // get outerHeight of `li`
if($li.length>0)
$(this).find('.select-options').scrollTop(index * height)
//this is the part where i need to take the viewport to the selected item
$(".select").not($(this)).removeClass("focus");
$(".select").not($(this)).removeClass("overflow-auto");
$(this).toggleClass("overflow-auto");
if ($(this).hasClass("focus")) {
$(this).removeClass("focus");
} else {
$(this).addClass("focus");
}
$(".select .select-options").not($(this).children(".select-options")).removeClass("active");
$(".select").not($(this)).removeClass("border-bottom-zero");
if ($(this).hasClass("border-bottom-zero")) {
$(this).removeClass("border-bottom-zero");
} else {
$(this).addClass("border-bottom-zero");
}
if ($(this).children(".select-options").hasClass("active")) {
$(this).children(".select-options").removeClass("active");
} else {
$(this).children(".select-options").addClass("active");
}
});
$(".select select > option").each(function() {
$(this).parents(".select").find(".select-options").append("<li class='" + this.value + "'>" + this.text + "</li>");
});
$(".select-options li").click(function() {
$(this).parents(".select-options").children("li").removeClass("selected");
$(this).addClass("selected");
$(this).parents(".select").find("h5").text($(this).text());
$(this).parents(".select").find("select").val($(this).attr("class"));
});
$(".select-mileage .icons").on("click", function() {
if ($(this).parent().hasClass("border-left-bottom-zero")) {
$(this).parent().removeClass("border-left-bottom-zero");
} else {
$(this).parent().addClass("border-left-bottom-zero");
}
$(this).parent().find(".mileage-select-options").toggleClass("active");
});
$(".select-mileage li").click(function() {
$(this).parents(".select-mileage").find("h6").text($(this).text())
$("#km-or-mi").val($(this).text());
$(this).parent().removeClass("active");
$(this).parents(".fields").removeClass("border-left-bottom-zero");
});
$(".fields").focusout(function() {
$(this).removeClass("focus");
});
// select snippet.select {
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select::before {
content: url("../images/caret-down.png");
position: absolute;
right: 20px;
top: 17px;
}
.select select {
visibility: hidden;
}
.select .select-options {
position: absolute;
top: 101%;
background-color: white;
width: calc(100% - 63px);
z-index: 1;
left: 64px;
border: 1px solid #dcdee3;
border-top: 0;
visibility: hidden;
padding: 10px 0;
}
.select .active {
visibility: visible;
}
.select .active .selected {
background-color: #dcdee3;
}
.select .select-options li {
display: block;
width: 100%;
/*border-bottom: 1px solid #dcdee3;*/
color: #484848;
font-family: 'Poppins', sans-serif;
font-weight: 400;
list-style: none;
font-size: 14px;
padding: 28px;
padding-top: 15px;
padding-bottom: 10px;
position: relative;
}
.select .select-options li::before {
position: absolute;
left: 28px;
bottom: 0;
content: "";
height: 1px;
background-color: #dcdee3;
width: calc(100% - 63px);
}
.fields {
border: 1px solid #dcdee3;
width: 85%;
margin-right: 98px;
display: inline-block;
position: relative;
height: 60px;
border-radius: 9px;
vertical-align: top;
box-shadow: 0px 0px 10px 6px rgba(251, 251, 252, 0.75);
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
overflow: hidden;
}
.overflow-auto {
overflow: initial;
}
.fields img {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
.fields .icons {
border-right: 1px solid #dcdee3;
height: 100%;
width: 65px;
display: inline-block;
position: relative;
}
.fields input,
.fields h5 {
border: 0;
display: inline-block;
vertical-align: top;
padding-left: 26px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
width: 76%;
margin-top: 22px;
}
.focus {
border-color: #53a6fa;
box-shadow: 0px 0px 4px .2rem rgba(83, 166, 250, .25);
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
}
input:focus {
outline-width: 0;
}
.fields span {
position: absolute;
left: 86px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #e35959;
top: 24px;
}
.fields input::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
}
.fields input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
opacity: 1;
font-size: 14px;
}
.fields input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
opacity: 1;
font-size: 14px;
}
.fields input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
}
.fields input,
.fields h5 {
border: 0;
display: inline-block;
vertical-align: top;
padding-left: 26px;
font-family: 'Poppins', sans-serif;
font-weight: 400;
color: #687182;
font-size: 14px;
width: 76%;
margin-top: 22px;
}
.select .select-options {
top: 102%;
max-height: 250px;
overflow-y: auto;
}
position: absolute;
top: 101%;
background-color: white;
width: calc(100% - 63px);
z-index: 1;
left: 64px;
border: 1px solid #dcdee3;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(220,
222,
227);
border-top: 0;
visibility: hidden;
padding: 10px 0;<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fields select" id="category">
<div class="icons">
<img src="http://localhost/dealercarpages_laravel/public/assets-dealer/images/car.png">
</div>
<h5>Enter Category</h5>
<span>*</span>
<div class="select-options">
<li class="9">Convertible</li>
<li class="10">Coupe</li>
<li class="11">Hatchback</li>
<li class="12">Sedan</li>
<li class="13">Wagon</li>
<li class="14">Minivan / Van</li>
<li class="15">SUV / Crossover</li>
<li class="16">Truck / Pickup</li>
<li class="17">Commercial / Cargo / Bus</li>
<li class="18">Motorcycle / Scooter</li>
<li class="19">Wheelchair Accessible</li>
<li class="20">Atv</li>
<li class="21">Boat</li>
<li class="22">RV</li>
<li class="23">Snowmobile</li>
<li class="24">Trailer</li>
<li class="25">Types</li>
<li class="26">Was</li>
</div>
<p class="error" style="display: none;">This Value is Required</p>
<select name="category">
<option value="9">Convertible</option>
<option value="10" selected="">Coupe</option>
<option value="11">Hatchback</option>
<option value="12">Sedan</option>
<option value="13">Wagon</option>
<option value="14">Minivan / Van</option>
<option value="15">SUV / Crossover</option>
<option value="16">Truck / Pickup</option>
<option value="17">Commercial / Cargo / Bus</option>
<option value="18">Motorcycle / Scooter</option>
<option value="19">Wheelchair Accessible</option>
<option value="20">Atv</option>
<option value="21">Boat</option>
<option value="22">RV</option>
<option value="23">Snowmobile</option>
<option value="24">Trailer</option>
<option value="25">Types</option>
<option value="26">Was</option>
</select>
</div>