有输入功能的HTML下拉框--并且可以动态获取文本框的值

< DIV  style ="POSITION: absolute" >
< TABLE  cellSpacing =0  cellPadding =0  border =0 >
< TBODY >
    
< TR >
        
< TD >
            
< SELECT  name ="districtSelect"  style ="LEFT: 0px; TOP: 0px; WIDTH: 100px; CLIP: rect(0px auto auto 80px); POSITION: absolute"  onchange ="document.getElementById('district').value=this.options[this.selectedIndex].value" >
                
< OPTION  value ="YangPu"  selected > YangPu </ OPTION >
                
< OPTION  value ="HongKou" > HongKou </ OPTION >
                
< OPTION  value ="XuHui" > XuHui </ OPTION >
                
< OPTION  value ="PuDong" > PuDong </ OPTION >
            
</ SELECT >
            
< INPUT  id ="district"  name ="district"  style ="LEFT: 0px; TOP: 0px; WIDTH: 81px; POSITION: absolute" >
        
</ TD >
    
</ TR >
</ TBODY >
</ TABLE >
</ DIV >

使用时,应该把上面包括DIV标签在内的所有的代码放到你想放置下拉框的地方。

  事实上,这个下拉框是由一个input和一个select组成的,select只是提供选择的内容,而实际的值是存储在input中的,所以你应该取input值作为这个下拉框的最终值。


示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

<script type="text/javascript">

function getValue(){

var value = $("#district").val();

console.log(value);

}

</script>

</head>
<body>

<DIV style="POSITION: absolute">

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD>

<SELECT name="districtSelect"

style="LEFT: 0px; TOP: 0px; WIDTH: 100px; CLIP: rect(0px auto auto 80px); POSITION: absolute"

οnchange="document.getElementById('district').value=this.options[this.selectedIndex].value">

<OPTION value="YangPu" selected>YangPu</OPTION>

<OPTION value="HongKou">HongKou</OPTION>

<OPTION value="XuHui">XuHui</OPTION>

<OPTION value="PuDong">PuDong</OPTION>

</SELECT> 

<INPUT id="district" name="district" style="LEFT: 0px; TOP: 0px; WIDTH: 81px; POSITION: absolute">

</TD>

</TR>

</TBODY>

</TABLE>

</DIV>

<button οnclick="getValue()">commit</button>

</body>
</html>


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页