可输入的下拉框 & amp;& 输入框为空时的处理

一般可输入的下拉框都需要模拟，比较繁琐，这里给出一个简单的Demo展现不需要模拟的可输入下拉框。。。

在此使用了大量的blur和focus，主要是从细节考虑，提升用户体验。。。 ^^

如图：

code如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
    &lt;title&gt;&lt;/title&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
    &lt;mce:script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot; mce_src=&quot;jquery.js&quot;&gt;&lt;/mce:script&gt;
    &lt;mce:script type=&quot;text/javascript&quot;&gt;&lt;!--
    var values = [&quot;test1&quot;,&quot;test2&quot;,&quot;test3&quot;,&quot;test4&quot;,&quot;test5&quot;,&quot;test6&quot;,&quot;test7&quot;,&quot;test8&quot;,];
    $(function(){
    	$(&quot;#imgdropdown &quot;).click(function(){
    		$(&quot;#selectspan&quot;).show();
    		$(&quot;#select&quot;).focus();
        });
        
    	$(&quot;#select&quot;).focus(function(){
            $(this).attr(&quot;size&quot;, $(&quot;option&quot;,$(&quot;#select&quot;)).size());
        }).change(function(){
            $(this).attr(&quot;size&quot;, 1);
            $(&quot;#selectspan&quot;).hide();
        	$(&quot;#input&quot;).val($(&quot;#select&quot;).val());
        	$(&quot;#input&quot;).focus();
        }).blur(function(){
            $(this).attr(&quot;size&quot;, 1);
            $(&quot;#selectspan&quot;).hide();
        });
		for(var i = 0; i &lt; values.length; i++)
		{
			$(&quot;#select&quot;).append(&quot;&lt;option value=\&quot;&quot; + values[i] + &quot;\&quot; title='&quot;
                	+ values[i] +  &quot;'&gt;&quot;
                	+ values[i] + &quot;&lt;/option&gt;&quot;);
		}
		
		$(&quot;#input&quot;).keyup(function (){
    	empty();
    }).focus(function (){
    	empty();
    });
    
    });        	
			function empty(){
				if($(&quot;#input&quot;).val().replace(/\s/gi,&quot;&quot;) != ''){
			$(&quot;#okbtn&quot;).removeAttr(&quot;disabled&quot;);
    	}else{
    		$(&quot;#okbtn&quot;).attr(&quot;disabled&quot;,&quot;true&quot;);
        }
			}
    
    
    function save(){
    	for(var i = 0; i &lt; values.length; i++)
		{
    		if($(&quot;#input&quot;).val() == values[i])
    		{
    			var isRepeat = confirm(values[i] + &quot; already exists. Do you want to replace it?&quot;);
        		if(!isRepeat){
            		$(&quot;#input&quot;).empty();
            		$(&quot;#input&quot;).focus();
            		return;
            	}else{
            		//submit()
            		window.close(); 
                }
        	}
		}
    	//submit()
		window.close();            
    }

// --></mce:script>

</head>

<body>

<div class="saveTag">

<div class="saveTagPanel">
            &lt;span id=&quot;selectspan&quot; class=&quot;none&quot; style=&quot;border-right: 1px solid rgb(127, 157, 185); overflow: hidden; position: absolute; top: 30px; width: 259px; left: 69px;display:none&quot;&gt;
                &lt;select id=&quot;select&quot; style=&quot;width: 287px; height: 80px;&quot;&gt;
                &lt;/select&gt;
            &lt;/span&gt;
            &lt;table style=&quot;background-color: rgb(240, 245, 249);&quot; mce_style=&quot;background-color: #f0f5f9;&quot;&gt;
            &lt;tbody&gt;&lt;tr&gt;
            &lt;td&gt;
            Pls input:
            &lt;/td&gt;
            &lt;td&gt;
             &lt;table style=&quot;border: 1px solid rgb(127, 157, 185);&quot; mce_style=&quot;border: 1px solid #7f9db9;&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
				&lt;tbody&gt;&lt;tr&gt;
        			&lt;td class=&quot;black&quot;&gt;
           				&lt;input name=&quot;box&quot; id=&quot;input&quot; style=&quot;border: 0px none ; width: 240px; padding-left: 2px;&quot;&gt;
        			&lt;/td&gt;
        			&lt;td align=&quot;right&quot; width=&quot;17&quot;&gt;                
            			&lt;img id=&quot;imgdropdown&quot; style=&quot;padding: 1px;&quot; mce_style=&quot;padding: 1px;&quot;  src=&quot;dropdown.gif&quot; mce_src=&quot;dropdown.gif&quot; border=&quot;0&quot; height=&quot;16&quot; width=&quot;16&quot;&gt;
            		&lt;/td&gt;
    			&lt;/tr&gt;
			&lt;/tbody&gt;&lt;/table&gt;
            &lt;/td&gt;
            &lt;/tr&gt;               
			&lt;/tbody&gt;&lt;/table&gt;
        &lt;/div&gt;
        &lt;div class=&quot;saveTagBottom&quot;&gt;
            &lt;button onclick=&quot;save()&quot; disabled=&quot;disabled&quot; id=&quot;okbtn&quot;&gt;ok&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;</pre>

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！

可输入的下拉框 & amp;&amp; 输入框为空时的处理

可输入的下拉框 & amp;& 输入框为空时的处理