JS: a simple example of getting the text box, drop-down box, and single-sheet value

JS: a simple example of getting the text box, drop-down box, and single-sheet value

This article mainly introduces a simple example of JS text box, drop-down box, and single-region value. If you need it, you can refer to it for help.

1. Text Box

 

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

 

Use var t = document. getElementById ("test"). value to assign the value to variable t,

 

1.2 of course, you can also assign the known variable value to the text box, for example:

 

Var m = "5 ";

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

 

2. drop-down list box

 

2.1

<Select name = "sel" id = "sel" onchange = "look ();">

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

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

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

</Select>

 

Using var s = document. getElementById ("sel "). value is used to obtain the value selected in the <select> box. The value = "2" is selected by default, so the value assigned to variable s is "2" instead of "22 ",

 

If you want to assign the "value" such as "3" corresponding "text value" ("33") selected in <select> to the test text box, you can use the following method,

 

The Code is as follows:

<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 (options [I]. selected)

{

Document. getElementById ("test"). value = option [I]. text;

}

}

 

 

 

 

 

}

 

</Script>

 

 

2.2 compare the given value with the value in the <select> box. If the value of <option> in <select> is the same as the given value, select it.

The Code is as follows:

Var m = "2 ",

 

For (var I = 0; I <document. getElementById ("sel"). length; I ++)

{

With (document. getElementById ("sel"). options [I])

{

If (value = m)

{

Selected = true;

}

}

}

 

 

3. Single region

 

The name attribute values of a single queue must be the same, so that you can select one option.

The Code is as follows:

<Input type = "radio" NAME = "a" value = "1"> aaaaaaaa <br>

<Input type = "radio" NAME = "a" value = "2"> bbbbbbbbb <br>

<Input type = "button" onclick = "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 ("bbbbbbbbbbb ");

}

}

// -->

</Script>

 

 

Js to get the value and text of the selected items in the drop-down box

 

Obtain the value and text of the selected items in the drop-down box in Firefox and IE:

 

1. Methods supported by IE and Firefox:

 

Get Text

The Code is as follows:

Var obj = document. getElementById ('select _ template ');

Var text = obj. options [obj. selectedIndex]. text; // get text

 

Var obj = document. getElementById ("select_template ");

 

For (I = 0; I <obj. length; I ++) {// The length of the drop-down box is the number of options

 

If (obj [I]. selected = true ){

 

Var text = obj [I]. text; // get text

 

}

}

 

 

Compared with the previous method

 

1. IE does not support Firefox:

 

The Code is as follows:

Var obj = document. getElementById (name );

 

For (I = 0; I <obj. length; I ++ ){

If (obj [I]. selected = true ){

Var text = obj [I]. innerText;

}

}

 

 

Methods for getting values IE and Firefox:

Var value = document. getElementById ("select_template"). value; // get the value

 

Conclusion: Both IE and Firefox support the value and text attributes. Firefox does not support the innerText attribute.

 

Js implements the current page to open a new link:

Window. location. href = url;