Question

我的代码中发生了什么，当我选择＆＃34;看到更多＆＃34;选项，我删除该选项并引入更多选项进行查看。我希望在下拉列表保持打开状态时完成所有操作。

＆＃13;

    $(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";
    			}
    		 			
    		}		  	
    	});	
    });

＆＃13;

    .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;
    }

＆＃13;

<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 &gt;</option>										
                						<option class="hide" value="4">Fund 4</option>
										<option class="hide" value="5">Fund 5</option>																			
									</select>

＆＃13;

正如您所看到的，我可以删除＆＃34;查看全部＆＃34;选项，然后显示其他选项，但是当我点击视图时，所有下拉菜单都会上升，您必须单击才能将其恢复，这不是最好的用户体验。我已经尝试阻止默认操作，但没有用。

非常感谢任何帮助

任何想法

点击＆＃34;查看更多＆＃34;下拉列表中的选项。我希望下拉列表保持打开状态

0 个答案: