我的代码中发生了什么,当我选择"看到更多"选项,我删除该选项并引入更多选项进行查看。我希望在下拉列表保持打开状态时完成所有操作。
$(document).ready(function () {
$('#cd-dropdown').change(function (event) {
var value = $(this).val();
if (value == "seeMore") {
var seeMore = document.getElementById("seeMore");
seeMore.parentNode.removeChild(seeMore)
event.preventDefault()
var changeClass = document.getElementsByClassName("hide");
for(var i = changeClass.length - 1; i >= 0; --i) {
changeClass[i].className = "show";
}
}
});
});

.hide {
display: none;
}
.show {
display: block;
}
.clearfix {
padding-bottom: 15px;
}
select:-moz-focusring { color: transparent;
text-shadow: 0 0 0 #000;
}
select.custom-dropdown {
-webkit-appearance: none;
-moz-appearance: none;
border: solid 1px #087c89 !important;
color: #087c89;
font-family:StandardLife-Light_Beta5, Arial, sans-serif;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
padding: 10px;
width: 100%;
cursor: pointer;
background: #fff url(/resources/custom/customer/images/decoration/smIconArrowRight2Down.gif) no-repeat right center;
background-size: 40px 37px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="cd-dropdown" data-toggle="dropdown" name="cd-dropdown" class="custom-dropdown">
<option value="-1" selected="">Funds in your portfolio (5)</option>
<option value="1">Fund 1</option>
<option value="2">Fund 2</option>
<option value="3">Fund 3</option>
<option id="seeMore" value="seeMore">View all funds ></option>
<option class="hide" value="4">Fund 4</option>
<option class="hide" value="5">Fund 5</option>
</select>
&#13;
正如您所看到的,我可以删除&#34;查看全部&#34;选项,然后显示其他选项,但是当我点击视图时,所有下拉菜单都会上升,您必须单击才能将其恢复,这不是最好的用户体验。我已经尝试阻止默认操作,但没有用。
非常感谢任何帮助
任何想法