有輸入功能的HTML下拉框--並且可以動態獲取文字框的值
使用時,應該把上面包括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"
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>
<button onclick="getValue()">commit</button>
</body>
</html>