相当难得的js option 参考

最新推荐文章于 2022-07-11 07:35:00 发布

原创最新推荐文章于 2022-07-11 07:35:00 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #CSS #Access #Web #ViewUI

js应用专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用JavaScript动态地创建、删除及更新HTML选择框（select box）中的选项，并通过一个实例展示了如何根据一个选择框的选择结果来填充另一个选择框。

This is an option box:

<form name="testform">
<select name="testselect">
 <option value="first">first option</option>
 <option value="second">second option</option>
 <option value="third">third option</option>
 <option>your browser can't handle this script</option>
</select>
</form>

To access options in a select box, you use the following code:

document.forms['testform'].testselect.options[i]

where i is the number of the option you want to access. Remember that the first option is options[0], the second one is options[1] etc.

Now if you want to delete the option, do

document.forms['testform'].testselect.options[i] = null;

By making it null, the option is completely removed from the list. Note that this also affects the numbering of the options. Suppose you remove option[1] from the example above, the old option[2] ('Third option') becomes option[1] etc.

To create a new option, do:

document.forms['testform'].testselect.options[i] = new Option('new text','new value');

where new text is the text the user sees and new value is the VALUE of the new option, the bit that's sent to the server when the form is submitted. Of course the new option overwrites the old one.

To completely clear a select box, do

document.forms['testform'].testselect.options.length = 0;

Object detection

<OPTION>Your browser can't handle this script</OPTION>

As to this cryptic option in the example above, it is for object detection.

This is more difficult than usual because the option object itself is supported by all browsers. What we want to know here is if we can add or remove option objects. The trick is to put one extra option in one select box. A script called onLoad tries to remove this option. If, after that, the option's still there the browser has failed its support detect.

This script performs the detect and gives a variable optionTest. If it's false the browser can't handle dynamic options and you should not execute the scripts.

function init()
{
 optionTest = true;
 lgth = document.forms['testform'].testselect.options.length - 1;
 document.forms['testform'].testselect.options[lgth] = null;
 if (document.forms['testform'].testselect.options[lgth]) optionTest = false;
}

<BODY onLoad="init()">

If you select the place of the test option wisely, the text Your browser can't handle this script informs people with old browsers that they can't use this select box script, while users with modern browsers never see the option since it's removed quickly.
You can also place one   in the option if you don't want any text.

Example

Try the example below. The options in the second box are links.html css javascript
EvoltCSS1 Mastergrid

One of the strange things I discovered is that the target select box (the second one) must have a SIZE of more than 1, or else Netscape and Explorer each develop their own bugs.

The script

var store = new Array();

store[0] = new Array(
 'HTML Compendium',
 'http://www.htmlcompendium.org',
 'Web Designer\'s Forum',
 'http://www.wdf.net');

store[1] = new Array(
 'Web Designer\'s Forum',
 'http://www.wdf.net',
 'CSS1 Mastergrid',
 'http://webreview.com/wr/pub/guides/style/mastergrid.html');

store[2] = new Array(
 'Stefan Koch\'s JavaScript Tutorial',
 'http://rummelplatz.uni-mannheim.de/~skoch/js/tutorial.htm',
 'Client Side JavaScript Reference',
 'http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm',
 'Web Designer\'s Forum',
 'http://www.wdf.net');

function init()
{
 optionTest = true;
 lgth = document.forms[0].second.options.length - 1;
 document.forms[0].second.options[lgth] = null;
 if (document.forms[0].second.options[lgth]) optionTest = false;
}

function populate()
{
 if (!optionTest) return;
 var box = document.forms[0].first;
 var number = box.options[box.selectedIndex].value;
 if (!number) return;
 var list = store[number];
 var box2 = document.forms[0].second;
 box2.options.length = 0;
 for(i=0;i<list.length;i+=2)
 {
  box2.options[i/2] = new Option(list[i],list[i+1]);
 }
}

init() is called onLoad, as explained above.

This select box triggers the changing of the other one:

<select size=4 name="first" width=200 οnchange="populate()">
 <option value="0">html</option>
 <option value="1">css</option>
 <option value="2">javascript</option>
</select>

Explanation

First of all, create some arrays that hold the options. Options are stored in name/value pairs.

var store = new Array();

store[0] = new Array(
 'HTML Compendium','http://www.htmlcompendium.org',
etc.

Please note that the number of the array corresponds with the value of the option: HTML has value 0 and if it's selected it writes store[0] into the second select box.

Then for the actual script. First check if optionTest is false, if so the script is not executed.

function populate()
{
 if (!optionTest) return;

Get the value of the selected option. This should be a number.

var box = document.forms[0].first;
 var number = box.options[box.selectedIndex].value;

If for some reason it doesn't exist, end the function. This gives you the freedom to put empty options in the select boxes (like -- Select a category --).

if (!number) return;

Get the correct option list store[number] and put it in list[]. Then access the second select box.

var list = store[number];
 var box2 = document.forms[0].second;

Clear the second select box.

box2.options.length = 0;

Finally, go through the correct list of name/value pairs and make each of them a new option in the second select box.

for(i=0;i<list.length;i+=2)
 {
  box2.options[i/2] = new Option(list[i],list[i+1]);
 }
}

Explorer 5.0 problems

When it comes to dynamically generating options and selects, Explorer 5.0 on Windows has quite a few problems:

Generating options in another frame or window doesn't work. Put the script in the page that contains the select. I have heard, but did not test, that this problem still exists in Explorer 6.0
Generating selects and options through the 'pure' W3C DOM (ie. with any document.createElement()) crashes Explorer 5.0 . Solved in 5.5
Generate these selects and options through innerHTML instead.
Generating options from a popup window may crash any Explorer Windows.

I have heard, but did not test, that the script below works fine in IE 5.0:

var doc = select.ownerDocument;
if (!doc)
 doc = select.document;
var opt = doc.createElement('OPTION');
opt.value = value;
opt.text = text;
select.options.add(opt, index);