如何用javascript獲取文本框，下拉框，單選框的對應值或者將值賦給它們？

雪原虎?發布于：2007-10-22 00:32

1.文本框

1.1 <input type="text" name="test" id="test">

通過var t=document.getElementById("test").value把值賦給變量t,

1.2? 當然也可以反過來把已知的變量值賦給文本框，例如：

var m = "5";

document.getElementById("test").value= m;

?

2.下拉列表框

2.1 <select name="sel" id="sel" οnchange="look();">

<option value="1" >11</option>

<option value="2" selected>22</option>

<option value="3">33</option>

</select>

通過var s=document.getElementById("sel").value獲取<select>框中選中的值，此處默認選中value="2"的選項，所以賦給變量s 的值是"2",而不是"22",

假如要把<select>中選擇的"值"如"3"對應的"文本值"("33")賦給test文本框，可以通過如下方法，

?<script language="javascript">

function look(){

?????var se =document.getElementById("sel");??
???????????????? var option=se.getElementsByTagName("option");??
???????????????? var str = "" ;??
???????????????? for(var i=0;i<option.length;++i)??
???????????????? {??
???????????????? if(option[i].selected)??
???????????????? {???
???????????????? document.getElementById("test").value = option[i].text;???
???????????????? }??
???????????????? }??

?

?

}

</script>

2.2 將給定的值與<select>框中的值進行比較，如果<select>中的<option>的value值與給定的值相同，則選中它。

var m = "2",

?for(var i = 0;i<document.getElementById("sel").length;i++)
????????{
?????????with(document.getElementById("sel").options[i])
???????????????? {
???????????????? if(value == m)
???????????????? {
???????????????? selected = true;
???????????????? ?}
????????????????}
????????}

?

2.3 如何得到可以復選的下拉框的值

?<select? name="multisel"? id="multisel"? size="15" multiple="multiple"??

?????? style="width:150">
???? <option value="1">呵呵</option>?
???? <option value="2">哈啊哈</option>
?? ? <option value="3">人生</option>?
??? ?<option value="4">無常</option>
? </select>
?<input type="button" value="你選中的是?" οnclick="getSelValue()" />

function getSelValue(){
? var code;
? var content;
? var multisel = document.getElementById("multisel");
?
?/** var codeArray=new Array();
? var contentArray=new Array();
? for(var h=0;h<multisel.options.length;h++)
? {
?? if(multisel.options[h].selected){
???? code = multisel.options[h].value;
????? content = multisel.options[h].text;
????? contentArray[h] = content;
????? codeArray[h]? = code;
????? }
? }

?alert("------------"+contentArray); */

? var codeString=""
? var contentString="";
?
? for(var h=0;h<multisel.options.length;h++)
??? ?{
?????? if(multisel.options[h].selected){
????????? ?code = multisel.options[h].value;
?????????? content = multisel.options[h].text;
???????????contentString += (content+",");
?????????? codeString += (code+",");
????????? ?}
???? ?}
var subContentString=contentString.substring(0,contentString.length-1);
?alert("------------"+subContentString)

}
? </script>

?

3.單選框

一排單選框的name屬性值必須相同，這樣才可以實現單選。

<INPUT TYPE="radio" NAME="a" value="1">aaaaaaaaaa<br>
<INPUT TYPE="radio" NAME="a" value="2">bbbbbbbbb<br>
<INPUT TYPE="button" οnclick="check();" value="test">
<script LANGUAGE="javascript">
<!--
function check()
{
?var sel = 0;
?for (var i = 0; i < document.getElementsByName("a").length; i++)
?　{
??　　if(document.getElementsByName("a")[i].checked)
??　　　{
???　　　　sel = document.getElementsByName("a")[i].value;
??　　}
?　}
?
　　?if(sel == 1)
　　　?{
?　　　　　?alert("aaaaaaaaaa");
　　　　　?}
　　?else if(sel== 2)
?　　　{
??　　　　alert("bbbbbbbbb");
?　　　　}
}
//-->
</script>

總結

以上是生活随笔為你收集整理的如何用javascript获取文本框，下拉框，单选框的对应值或者将值赋给它们？雪原虎 发布于：2007-10-22 00:32的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。