如何以适当的方式设置选择标记以具有＆＃34; 5＆＃34;的大小

Question

正如您在下面的代码段中看到的，有很多选择 当我单击选择标记时，将在其大小为5之前显示一个长列表。你可以尝试一下 。我不想要它的错误效果。

我尝试了mousedown事件以防止但是失败了。如何控制它？

＆＃13;

＆＃13;

$("#select").click(function(event){
			event.preventDefault();
			event.stopPropagation();
			if ( !$(this).hasClass("size") ) {
				$(this).attr("size","5");
				$(this).addClass("size");
			} else {
				$(this).attr("size","1");
				$(this).removeClass("size");
			}
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
			<select name="test" id="select">
				asdfasdf
				<option value="">option1</option>
				<option value="">option2</option>
				<option value="">option3</option>
				<option value="">option4</option>
				<option value="">option5</option>
				<option value="">option6</option>
				<option value="">option7</option>
				<option value="">option8</option>
				<option value="">option9</option>
				<option value="">option8</option>
				<option value="">option7</option>
				<option value="">option6</option>
				<option value="">option5</option>
				<option value="">option4</option>
				<option value="">option3</option>
				<option value="">option2</option>
				<option value="">option1</option>
				<option value="">option2</option>
				<option value="">option3</option>
				<option value="">option4</option>
				<option value="">option5</option>
				<option value="">option6</option>
				<option value="">option7</option>
				<option value="">option8</option>
				<option value="">option9</option>
				<option value="">option0</option>
				<option value="">option9</option>
				<option value="">option8</option>
				<option value="">option7</option>
				<option value="">option6</option>
			</select>
		</div>

＆＃13;

＆＃13;

＆＃13;

模糊时，它不会变成一个大小。

Answer 1

试试这个

 $("#select").one("click",function(){
   if (!$("#select").hasClass("size")) {
     $("#select").attr("size", "5");
     $("#select").addClass("size");
   } else {
     $("#select").attr("size", "1");
     $("#select").removeClass("size");
   }
});

Answer 2

另一篇文章在另一篇文章中看到了它，它与使用jquery的工作小提琴有很好的联系。

<select name="select1" onmousedown="if(this.options.length>8){this.size=2;}" onchange='this.size=0;' onblur="this.size=0;">

http://jsfiddle.net/aTzc2/

您可以将this.size =设置为您想要的任何内容。

<div id="myselect-container">
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=5;">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
    <option value="6">option 6</option>
    <option value="7">option 7</option>
    <option value="8">option 8</option>
    <option value="9">option 9</option>
    <option value="10">option 10</option>
    <option value="11">option 11</option>
        <option value="12">option 12</option>
    </select>
</div>

css：

#myselect-container {
    position:relative;
    height:9px;
    width:100px;
    /*for contain our absoulte select tag */
}
#myselect-container select {
   position:absolute;
   /*for put our list on other tag */

}

Answer 3

＆＃13;

＆＃13;

$(function(){
			$("#test").click(function(event){
				event.preventDefault();
				event.stopPropagation();
				$(this).focus();
				if ( $("option").length > 5 ) {
					//选项超过五个
					if ( !$(this).hasClass("size") ) {
						//未打开状态时 展开下拉列表
						$(this).attr("size","5").addClass("size");
					} else {
						//已打开状态时 收回下拉列表
						$(this).attr("size","1").removeClass("size").blur();
					}
				} else {
					//选项不超过五个
					if ( !$(this).hasClass("size") ) {
						//未打开状态时 展开下拉列表
						$(this).attr("size" , $("option").length).addClass("size");
					} else {
						//已打开状态时 收回下拉列表
						$(this).attr("size","1").removeClass("size").blur();
					}
				}
			}).mousedown(function(event){
				event.preventDefault();
			}).blur(function(){
				$(this).attr("size","1").removeClass("size");
			}).change(function(){
				//blur之后才会触发change
				console.log($("option:selected").html());
			});
			$("option").click(function(event){
				event.preventDefault();
				console.log($(this).index());
				$("option").eq($(this).index()).prop("selected","selected");
			});


		});

＆＃13;

#test{
		font-size: 30px;
		position: fixed;
		left: 200px;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<select name="test" id="test" >
		asdfasdf
		<option value=""></option>
		<option value="">asdfasfd2</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
		<option value="">asdfasfd3</option>
		<option value="">asdfasfd4</option>
	</select>

＆＃13;

＆＃13;

＆＃13;