`

相当难得的js option 参考

阅读更多

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);
分享到:
评论

相关推荐

    JS事件OPTION事件触发

    JAVASCRIPT 实现OPTION的事件触发

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    js操作option,js添加删除option,js判断option中的value是否存在,简洁

    用js操作select的option,可以增加删除和判断value值是否在下拉列表存在

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    Javascript操作Select和Option

    Javascript操作Select和Option 一个网页 挺全的

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象, var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /

    js select option

    在JavaScript编程中,`select`元素和`option`标签是创建下拉列表的重要部分。`select`用于定义一个选择框,而`option`则用于在选择框中添加可选项。在网页交互中,用户通常会使用这样的下拉列表来从预设的选项中做出...

    select option带自定义图片

    然而,原生的`&lt;option&gt;`元素并不支持直接添加图片,但通过一些JavaScript和CSS的技巧,我们可以实现自定义带有图片的`&lt;option&gt;`效果。以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 ...

    select通过js删除指定的option选项

    简单的例子,点击按钮就删除掉option,也可以通过jquery加载的时候进行删除。

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    Option Option Option

    Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option Option ...

    option属性的js事件浏览器差异

    `option`属性和与之相关的JS事件在不同浏览器之间可能存在差异,这些差异主要体现在事件处理、行为表现和兼容性上。了解并处理这些差异对于确保网页在各种浏览器上的正常运行至关重要。 1. **事件绑定差异** 在...

    javascript_select_option_操作详解.txt

    ### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时,经常需要检测用户是否已选择了某个 `&lt;select&gt;` 元素中的 `&lt;option&gt;` 项。以下是一个简单的示例来实现这一功能: ```javascript ...

    Jquery操作Select option整理

    本文档汇总了一系列关于如何使用jQuery来操作`&lt;select&gt;`元素及其`&lt;option&gt;`子元素的方法,旨在为前端开发者提供一个实用的参考指南。 #### 二、遍历和操作 `&lt;option&gt;` 元素 **1. 遍历并移除特定 `&lt;option&gt;`:** ```...

    jquery获得select option值

    $("&lt;option value='1'&gt;1111&lt;/option&gt;&lt;option value='2'&gt;2222&lt;/option&gt;").appendTo("#sel"); ``` 使用jQuery可以方便地创建并添加新的`&lt;option&gt;`元素到下拉列表中。 2. **清空下拉列表的所有选项**: ```...

    用jquery获取select标签中选中的option值及文本的示例

    - 示例中提到当option元素没有value属性时(如&lt;option&gt;cc&lt;/option&gt;),使用.val()方法获取的是option内的文本值,而不是value属性的值。这是因为.val()方法在没有指定value的情况下,返回的是被选中的option元素的...

    select将选中的option设置为默认选项

    本文将详细介绍如何使用JavaScript将指定的`&lt;option&gt;`设置为默认选中。 首先,我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本用法。`&lt;select&gt;`元素包含一个或多个`&lt;option&gt;`,用户可以在这些选项中进行选择。例如: ``...

    WITH CHECK OPTION的用法

    在数据库管理领域,尤其是SQL语言的应用中,"WITH CHECK OPTION"是一个重要的概念,它主要用于视图的定义中,以限制通过视图进行的数据修改操作。本文将深入探讨WITH CHECK OPTION的用法及其背后的原理,帮助读者更...

    jquery动态添加option

    在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。本篇文章将深入探讨“jquery动态添加option”这一主题,它涉及到如何在HTML的下拉选择框(`&lt;select&gt;`元素)中动态地添加选项(`&lt;option&gt;`...

Global site tag (gtag.js) - Google Analytics