`

相当难得的js option 参考

JavaScriptIECSSAccessWeb 
阅读更多

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 &nbsp; 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 onchange="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:

  1. 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
  2. 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.
  3. 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);
分享到：
| 移动（增加删除）option
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics