1. 程式人生 > >有輸入功能的HTML下拉框--並且可以動態獲取文字框的值

有輸入功能的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"

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>