`

IE不支持option的display样式，只能使用remove和add

IEoption 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="yue-Hans" lang="yue-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>it works..............</title>
</head>
<body>
<form action="./" method="get">
    <dl>
        <dt>发布者</dt>
        <dd>
            <select name="q_role" onchange="role_change_type();">
                <option value="company">中介</option>
                <option value="person">个人</option>
            </select>
            <select name="q_type">
                <option value="sale">出售</option>
                <option value="lease">出租</option>
                <option value="buy" style="display:none">求购</option>
                <option value="hire" style="display:none">求租</option>
            </select>
        </dd>
    </dl>
</form>
</body>
</html>
想实现一个很简单的功能：当选中“中介”时，不显示“求购”与“求租”。本以为通过display:none即可实现，结果发现在option元素上使用display:none在firefox中有效，在IE6、IE7、IE8中都无效。
  
  
 所以，通过javascript设置display:none也是在IE中无效，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="yue-Hans" lang="yue-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>it works..............</title>
</head>
<body>
<form action="./" method="get">
    <dl>
        <dt>发布者</dt>
        <dd>
            <select name="q_role" onchange="role_change_type();">
                <option value="company">中介</option>
                <option value="person">个人</option>
            </select>
            <select name="q_type">
                <option value="sale">出售</option>
                <option value="lease">出租</option>
                <option value="buy">求购</option>
                <option value="hire">求租</option>
            </select>
        </dd>
    </dl>
    <script type="text/javascript">
    function role_change_type()
    {
        var q_role=document.getElementsByName("q_role");
        var q_type=document.getElementsByName("q_type");
        var q_type_option=q_type[0].getElementsByTagName("option");
        if(q_role[0].value=='company')
        {
            if(q_type[0].value=='buy'||q_type[0].value=='hire')
            {
                q_type[0].value='sale';
            }
            for(var i=0;i!=q_type_option.length;i++)
            {
                if(q_type_option[i].value=="buy"||q_type_option[i].value=="hire")
                {
                    q_type_option[i].style.display="none";
                     
                }
            }
        }
        if(q_role[0].value=='person')
        {
            for(var i=0;i!=q_type_option.length;i++)
            {
                q_type_option[i].style.display="";
            }
        }
    }
    role_change_type();
    </script>
</form>
</body>
</html>
  
所以，只能通过select元素的remove和add方法，当选中“中介” 时，把“求租”和“求购”删除。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="yue-Hans" lang="yue-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>it works..............</title>
</head>
<body>
<form action="./" method="get">
    <dl>
        <dt>发布者</dt>
        <dd>
            <select name="q_role" onchange="role_change_type();">
                <option value="company">中介</option>
                <option value="person">个人</option>
            </select>
            <select name="q_type">
                <option value="sale">出售</option>
                <option value="lease">出租</option>
                <option value="buy">求购</option>
                <option value="hire">求租</option>
            </select>
        </dd>
    </dl>
    <script type="text/javascript">
    var q_role=document.getElementsByName("q_role");
    var q_type=document.getElementsByName("q_type");
    var q_type_option=q_type[0].getElementsByTagName("option");
    alert(q_role[0].value)
    if(q_role[0].value=='company')
    {
        q_type[0].remove(3)
        q_type[0].remove(2)
    }
    function role_change_type()
    {
        if(q_role[0].value=='company')
        {
            q_type[0].remove(3)
            q_type[0].remove(2)
        }
        if(q_role[0].value=='person')
        {
            var x=document.createElement('option');
            x.text='求购';
            x.value='buy';
            var y=document.createElement('option');
            y.text='求租';
            y.value='hire';
            try
            {
            q_type[0].add(x,null);
            q_type[0].add(y,null); // standards compliant
            }
            catch(ex)
            {
            q_type[0].add(x);
            q_type[0].add(y); // IE only
            }
        }
    }
    </script>
</form>
</body>
</html>
这样在IE和firefox中都有效了。真费解啊，IE8竟然还不支持option的display:none 。
 上面的代码还有一个问题：在IE7和IE8中 选中“个人”，然后刷新，将导致“求租”和“求购”被删除。在IE6和firefox3.5.5中正常。
标签: javascript, css, ie
 
 
<a href="http://www.cnblogs.com/sink_cup/archive/2009/12/15/ie_option_display_none_select_remove_add_html_dom.html">http://www.cnblogs.com/sink_cup/archive/2009/12/15/ie_option_display_none_select_remove_add_html_dom.html</a>
<optgroup value = "3">4</optgroup>   直接隐藏！
分享到：
| phpcms v9 前台注册getshell 2017/04/09
评论
发表评论

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

相关推荐

    下拉列表JS网页特效

    2. 添加/删除选项：使用`add`方法添加新的选项，`remove`方法删除选项。 ```javascript var newOption = document.createElement('option'); newOption.value = 'option4'; newOption.textContent = '选项4'; ...

    自定义select html、js、css

    option.classList.remove('selected-option'); if (option.innerText === selectedOption) { option.classList.add('selected-option'); } }); } ``` 最后，为了实现与原生Select相同的功能，我们需要监听用户...

    JS+CSS实现实用的单击输入框弹出选择框的方法.docx

    target.add(newoption) } }else{ //alert(obj.options.length) for (i=0;i;i++){ mot=obj.options[i].text mov=obj.options[i].value var newoption=document.createElement("OPTION"); newoption.text=mot...

    asp js实现折叠样式

    本文将深入探讨如何使用JavaScript实现折叠样式和信纸选择样式，以提升用户体验。 折叠样式通常指的是网页中某些部分可以隐藏或展开的功能，这种设计能够有效地管理页面空间，使用户可以按需查看内容。实现...

    simple-tags

    * Add an option for choose input text or textarea for old tags field * Add an option for min chars autocompletion * Version 2.0-beta8 : * Update POT. * Update french translation. * Version 2.0-...

    js select选中显示不同表单内容.zip

    此外，可以使用CSS的`display`属性来控制其他表单内容的可见性。例如： ```css .form-content { display: none; /* 默认隐藏 */ } .show-form { display: block; /* 显示表单 */ } ``` 接下来，JavaScript是...

    JS实现单击输入框弹出选择框效果完整实例

    接着，我们将使用CSS来定义弹出选择框的样式，包括一个黑色半透明的覆盖层（`.black_overlay`）和一个白色的浮层（`.white_content`），这些元素在用户点击输入框时会被显示出来： ```css .black_overlay { ...

    仿腾讯云单选控件效果

    然而，仅用HTML和CSS实现腾讯云的样式并不足够。腾讯云的单选控件可能包含自定义图标、动画效果和独特的布局。这通常需要使用CSS预处理器（如Sass或Less）和JavaScript库来增强。例如，我们可以使用CSS创建一个圆圈...

    华为MA5605交换机配置技术资料

    - 使用命令`ima link add/remove`管理链路。 **4.6 设置ATM接口模式** - 使用命令`atm interface mode`调整接口模式。 **4.7 调整VPI/VCI使用范围** - 使用命令`atm interface vpi-range`、`atm interface vci-...

    端口查看工具

    o Added 'Add Header Line To CSV/Tab-Delimited File' option. When this option is turned on, the column names are added as the first line when you export to csv or tab-delimited file. * Version 1.82...

    select框上下移动排序

    可能需要使用polyfills或条件语句来处理不支持某些特性的旧版浏览器。 6. **测试与优化**：最后，进行详尽的测试，确保在不同场景下功能都能正确运行。同时，优化性能，减少不必要的计算和DOM操作，提高用户体验。 ...

    常用的一些计算机英语词汇

    14. Add/Remove Programs Option - 添加/删除程序选项，用于安装、卸载计算机上的应用程序。 15. Information Retrieval - 信息检索，是通过计算机系统从大量数据中查找所需信息的过程。 16. Voice Recognition ...

    Select精美下拉框(漂亮)

    this.options.add(NewOption, idx); NewOption.innerText = innerText; NewOption.value = value; if (!this.bOriginalSelect) this.createOptionTr(idx); this.syncOptions(); this.adjustOptionsDiv(); ...

    gerrit-3.0.3.war

    Issue 11137: Remove the gerrit.reportBugText configuration option. This option was only used in GWT, which has been removed. Upgrade JGit to 5.3.5.201909031855-r. This version includes a fix for ...

    ASP.NET Gridview隐藏/显示列源码

    当列头的hyperlink被点击的时候后，它将会传递GridView的名字，列的索引和列名给HideCol方法，这个方法能找到这一列的每个单元格,每个单元格的将添加display:none样式，用来隐藏这一列. 当选择"Show Column"中的...

    FairyGUI-Unity-Plugin-3.4.0.zip

    - NEW: Add multi-display support. - NEW: Add API DynamicFont(name, font). - IMPROVED: Compatibility with 2018.3. - FIXED: Incorrect letter spacing on mobile platform. - FIXED: Same transition hook may...

    thinkphp 3.2 省市区联动

    * 那么如果存在时就加不上去（数量），如果不存在时（如果不存在时的数量不一样时）就insert上去 * */ $province = M('prvices')-&gt;where ( array('pid'=&gt;1) )-&gt;select (); $this-&gt;assign('province',$...

    javascript50个常用或者有用

    - `ExpList.add(new Option("New Option","3"))`：向下拉列表动态添加选项。 - `ExpList.remove(ExpList.selectedIndex)`：删除当前选中的选项。 - `ExpList.selectedIndex`：获取或设置下拉列表中当前选中的项。...

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