简体   繁体   English

使用Javascript隐藏选择框中的选项

[英]Hiding options in select box using Javascript

 <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Home – dilo</title> <!--[if lt IE 9]> <script src="//cdn.jsdelivr.net/html5shiv/3.7.0/html5shiv.js"></script> <script src="//cdn.jsdelivr.net/respond/1.3.0/respond.min.js"></script> <![endif]--> <link rel="alternate" type="application/rss+xml" title="dilo » Feed" href="http://localhost/dilog/?feed=rss2"> <link rel="alternate" type="application/rss+xml" title="dilo » Comments Feed" href="http://localhost/dilog/?feed=comments-rss2"> <link rel="stylesheet" id="open-sans-css" href="//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&amp;subset=latin%2Clatin-ext&amp;ver=4.1" type="text/css" media="all"> <link rel="stylesheet" id="dashicons-css" href="http://localhost/dilog/wp-includes/css/dashicons.min.css?ver=4.1" type="text/css" media="all"> <link rel="stylesheet" id="admin-bar-css" href="http://localhost/dilog/wp-includes/css/admin-bar.min.css?ver=4.1" type="text/css" media="all"> <link rel="stylesheet" id="whisper-css" href="http://localhost/dilog/wp-content/themes/whisper/css/main.css?ver=4.1" type="text/css" media="all"> <link rel="stylesheet" id="jquery-jplayer-css" href="http://localhost/dilog/wp-content/themes/whisper/js/jplayer/skin/pixel-industry/pixel-industry.css?ver=4.1" type="text/css" media="all"> <link rel="stylesheet" id="jquery-prettyPhoto-css" href="http://localhost/dilog/wp-content/themes/whisper/js/prettyPhoto/prettyPhoto.css?ver=4.1" type="text/css" media="all"> <script type="text/javascript" src="http://localhost/dilog/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script> <script type="text/javascript" src="http://localhost/dilog/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/dilog/xmlrpc.php?rsd"> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/dilog/wp-includes/wlwmanifest.xml"> <meta name="generator" content="WordPress 4.1"> <link rel="canonical" href="http://localhost/dilog/?page_id=941"> <link rel="shortlink" href="http://localhost/dilog/?p=941"> <style type="text/css"> .recentcomments a { display: inline !important; padding: 0 !important; margin: 0 !important; } </style> <style type="text/css" media="print"> #wpadminbar { display: none; } </style> <style type="text/css" media="screen"> html { margin-top: 32px !important; } * html body { margin-top: 32px !important; } @media screen and (max-width: 782px) { html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } } </style> <meta name="description" content="<p></p>"> <script type="text/javascript"> jQuery("#nav-container > select > option[2]").remove(); console.log('hello'); </script> </head> <body class="page page-id-941 page-template-default logged-in admin-bar orange wide header-right-sidebar header-right-sidebar-below customize-support"> <div id="wrapper"> <header id="header"> <div class="clearfix inner"> <div id="logo" class="left"> <a href="http://localhost/dilog/" title=""> <img alt="logo" src="http://localhost/dilog/wp-content/themes/whisper/img/logo.png"> </a> </div> <div id="nav-container" class="right"> <nav id="nav"> <ul id="menu-menu-1" class="menu"> <li id="menu-item-7779" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-941 current_page_item menu-item-7779"><a href="http://localhost/dilog/?page_id=941">Home</a> </li> <li id="menu-item-7790" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub menu-item-7790"><a href="http://localhost/dilog/?page_id=1361">About Us</a> <ul class="sub-menu"> <li id="menu-item-7788" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7788"><a href="http://localhost/dilog/?page_id=7576">Our Organisation</a> </li> <li id="menu-item-7787" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7787"><a href="http://localhost/dilog/?page_id=2021">Our History</a> </li> <li id="menu-item-7786" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7786"><a href="http://localhost/dilog/?page_id=2001">Our Training Philosophy</a> </li> <li id="menu-item-7785" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7785"><a href="http://localhost/dilog/?page_id=2041">Our Vision</a> </li> <li id="menu-item-1702" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1702"><a href="http://localhost/dilog/?page_id=1331">Our Corporate Customers</a> </li> </ul> </li> <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub menu-item-13"><a href="#">Media</a> <ul class="sub-menu"> <li id="menu-item-7783" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7783"><a href="http://localhost/dilog/?page_id=1611">Images</a> </li> <li id="menu-item-7782" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7782"><a href="http://localhost/dilog/?page_id=1641">Videos</a> </li> <li id="menu-item-7784" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7784"><a href="http://localhost/dilog/?page_id=1591">In the News</a> </li> </ul> </li> <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub menu-item-14"><a href="#">Apply Now</a> <ul class="sub-menu"> <li id="menu-item-7789" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7789"><a href="http://localhost/dilog/?page_id=7583">Aviation English Training</a> </li> <li id="menu-item-7781" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7781"><a href="http://localhost/dilog/?page_id=1661">Aircraft Maintenance Training Programme</a> </li> </ul> </li> <li id="menu-item-7780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7780"><a href="http://localhost/dilog/?page_id=1541">Contact Us</a> </li> </ul> </nav> <select> <option value="">Go to...</option> <option value="http://localhost/dilog/?page_id=941">Home</option> <option value="http://localhost/dilog/?page_id=1361">About Us</option> <option value="http://localhost/dilog/?page_id=7576">Our Organisation</option> <option value="http://localhost/dilog/?page_id=2021">Our History</option> <option value="http://localhost/dilog/?page_id=2001">Our Training Philosophy</option> <option value="http://localhost/dilog/?page_id=2041">Our Vision</option> <option value="http://localhost/dilog/?page_id=1331">Our Corporate Customers</option> <option value="#">Media</option> <option value="http://localhost/dilog/?page_id=1611">Images</option> <option value="http://localhost/dilog/?page_id=1641">Videos</option> <option value="http://localhost/dilog/?page_id=1591">In the News</option> <option value="#">Apply Now</option> <option value="http://localhost/dilog/?page_id=7583">Aviation English Training</option> <option value="http://localhost/dilog/?page_id=1661">Aircraft Maintenance Training Programme</option> <option value="http://localhost/dilog/?page_id=1541">Contact Us</option> </select> <div id="header-right" class="right below"> <div class="widget right widget_search" id="search-2"> <form class="search-form" method="get" action="http://localhost/dilog/"> <input type="text" placeholder="Type and hit enter..." name="s"> <input type="submit"> </form> </div> <div class="widget right widget_recent_entries" id="recent-posts-2"> <h5 class="widget-title">Recent Posts</h5> <ul> <li> <a href="http://localhost/dilog/?p=1">Hello world!</a> </li> <li> <a href="http://localhost/dilog/?p=4771">Training</a> </li> <li> <a href="http://localhost/dilog/?p=4731">Events</a> </li> </ul> </div> <div class="widget right widget_recent_comments" id="recent-comments-2"> <h5 class="widget-title">Recent Comments</h5> <ul id="recentcomments"> <li class="recentcomments"><span class="comment-author-link"><a href="https://wordpress.org/" rel="external nofollow" class="url">Mr WordPress</a></span> on <a href="http://localhost/dilog/?p=1#comment-1">Hello world!</a> </li> </ul> </div> <div class="widget right widget_archive" id="archives-2"> <h5 class="widget-title">Archives</h5> <ul> <li><a href="http://localhost/dilog/?m=201501">January 2015</a> </li> <li><a href="http://localhost/dilog/?m=201406">June 2014</a> </li> </ul> </div> <div class="widget right widget_categories" id="categories-2"> <h5 class="widget-title">Categories</h5> <ul> <li class="cat-item cat-item-1"><a href="http://localhost/dilog/?cat=1">Uncategorized</a> </li> </ul> </div> <div class="widget right widget_meta" id="meta-2"> <h5 class="widget-title">Meta</h5> <ul> <li><a href="http://localhost/dilog/wp-admin/">Site Admin</a> </li> <li><a href="http://localhost/dilog/wp-login.php?action=logout&amp;_wpnonce=2ea0aaf0fb">Log out</a> </li> <li><a href="http://localhost/dilog/?feed=rss2">Entries <abbr title="Really Simple Syndication">RSS</abbr></a> </li> <li><a href="http://localhost/dilog/?feed=comments-rss2">Comments <abbr title="Really Simple Syndication">RSS</abbr></a> </li> <li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a> </li> </ul> </div> </div> </div> </div> </header> <div class="top-shadow"> <div class="shadow"></div> </div> <section class="featured-title"> <div class="container_12"> <div class="grid_12"> <div class="title left"> <h1>Home</h1> </div> <ul class="breadcrumbs right"> <li><span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="home" href="http://localhost/dilog/" itemprop="url"><span itemprop="title">Home</span> </a> </span> </li> <li>/</li> <li> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://localhost/dilog/?page_id=941" itemprop="url"><span itemprop="title">Home</span> </a> </span> </li> </ul> </div> </div> </section> <div id="main" class="container_12"> <section id="content" class="hfeed blog-post-single grid_8" role="main"> <article class="post-941 page type-page status-publish hentry page-content clearfix"> <div class="post-body entry-content"> <p></p> <div class="service-box"> <i class=""></i> <h5>Aircraft Maintenance Training</h5> <p> <img class="alignnone size-medium wp-image-2231" src="/wp-content/uploads/2014/04/dts.png" alt="" width="137" height="96"> <br>Approved Maintenance Training Organisation for fixed and rotary wing personnel.</p> </div> <a href="http://dilog.com.my/aviation-consultancy-2/"> <div class="service-box"> <i class=""></i> <h5>Aviation Consultancy</h5> <p> <img class="alignnone size-full wp-image-2201" src="/wp-content/uploads/2014/04/Delta.png" alt="image006" width="137" height="96"> <br>The Group's dynamic aviation consultancy arm.</p> </div> </a> <div class="service-box"> <i class=""></i> <h5>Aviation English</h5> <p> <img class="alignnone size-full wp-image-4821" src="/wp-content/uploads/2014/11/Aviation-English-Logo-83.png" alt="Aviation-English-Logo-New"> <br>Malaysia's and the region's only Aviation Language specialists.</p> </div> <p></p> </div> <div style="display:none"> <h1 class="entry-title"><a href="http://localhost/dilog/?page_id=941" title="Home" rel="bookmark">Home</a></h1> <ul class="post-meta clearfix"> <li> <time class="date updated" datetime="2014-03-26T09:19:11+00:00" pubdate="">March 26, 2014</time> </li> <li> <span class="author vcard"><a class="url fn n" href="http://localhost/dilog/?author=2" title="View all posts by san cheam" rel="author">san cheam</a></span> </li> <li> <span>Posted In: </span> </li> </ul> </div> </article> </section> <aside class="grid_4" id="sidebar"> <h5>Widget areas</h5>This is a sidebar (widget area). Please go to <a href="http://localhost/dilog/wp-admin/widgets.php">Appearance → Widgets</a> to add widgets to this area</aside> </div> <!-- #main --> <footer id="footer"> <div id="footer-sidebars" class="container_12"> <div class="footer-widget grid_3"> This is the Footer Sidebar 1 (widget area). Please go to <a href="http://localhost/dilog/wp-admin/widgets.php">Appearance → Widgets</a> to add widgets to this area</div> <div class="footer-widget grid_3"> This is the Footer Sidebar 2 (widget area). Please go to <a href="http://localhost/dilog/wp-admin/widgets.php">Appearance → Widgets</a> to add widgets to this area</div> <div class="footer-widget grid_3"> This is the Footer Sidebar 3 (widget area). Please go to <a href="http://localhost/dilog/wp-admin/widgets.php">Appearance → Widgets</a> to add widgets to this area</div> <div class="footer-widget grid_3"> This is the Footer Sidebar 4 (widget area). Please go to <a href="http://localhost/dilog/wp-admin/widgets.php">Appearance → Widgets</a> to add widgets to this area</div> </div> <!-- #footer-sidebars --> <div id="footer-text"> <div class="container_12"> <div class="grid_6">Copyright ©2015 <a class="site-link" href="http://localhost/dilog/" title="dilo" rel="home">dilo</a>. All rights reserved.</div> </div> </div> <!-- .copyright-container --> </footer> </div> <!-- #wrapper --> <script type="text/javascript" src="http://localhost/dilog/wp-includes/js/admin-bar.min.js?ver=4.1"></script> <script type="text/javascript" src="http://localhost/dilog/wp-content/themes/whisper/js/jplayer/jquery.jplayer.min.js?ver=2.2.0"></script> <script type="text/javascript" src="http://localhost/dilog/wp-content/themes/whisper/js/prettyPhoto/jquery.prettyPhoto.js?ver=3.1.5"></script> <script type="text/javascript" src="http://localhost/dilog/wp-content/themes/whisper/js/jquery.flexslider.js?ver=4.1"></script> <script type="text/javascript" src="http://localhost/dilog/wp-content/themes/whisper/js/jquery.carouFredSel-6.0.0-packed.js?ver=6.0.0"></script> <script type="text/javascript"> /* <![CDATA[ */ var Whisper = { "navDefault": "Go to..." }; /* ]]> */ </script> <script type="text/javascript" src="http://localhost/dilog/wp-content/themes/whisper/js/script.js?ver=4.1"></script> <script type="text/javascript"> (function() { var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\\\s+)(no-)?' + cs + '(\\\\s+|$)'); request = true; b[c] = b[c].replace(rcs, ' '); b[c] += (window.postMessage && request ? ' ' : ' no-') + cs; }()); </script> <div id="wpadminbar" class="mobile" role="navigation"> <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a> <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0"> <ul id="wp-admin-bar-root-default" class="ab-top-menu"> <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/dilog/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-wp-logo-default" class="ab-submenu"> <li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost/dilog/wp-admin/about.php">About WordPress</a> </li> </ul> <ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"> <li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li> <li id="wp-admin-bar-documentation"><a class="ab-item" href="http://codex.wordpress.org/">Documentation</a> </li> <li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li> <li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li> </ul> </div> </li> <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/dilog/wp-admin/">dilo</a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-site-name-default" class="ab-submenu"> <li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost/dilog/wp-admin/">Dashboard</a> </li> </ul> <ul id="wp-admin-bar-appearance" class="ab-submenu"> <li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost/dilog/wp-admin/themes.php">Themes</a> </li> <li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost/dilog/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%2Fdilog%2F%3Fpage_id%3D941">Customize</a> </li> <li id="wp-admin-bar-widgets"><a class="ab-item" href="http://localhost/dilog/wp-admin/widgets.php">Widgets</a> </li> <li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost/dilog/wp-admin/nav-menus.php">Menus</a> </li> </ul> </div> </li> <li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost/dilog/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a> </li> <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost/dilog/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-new-content-default" class="ab-submenu"> <li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost/dilog/wp-admin/post-new.php">Post</a> </li> <li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost/dilog/wp-admin/media-new.php">Media</a> </li> <li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost/dilog/wp-admin/post-new.php?post_type=page">Page</a> </li> <li id="wp-admin-bar-new-portfolio"><a class="ab-item" href="http://localhost/dilog/wp-admin/post-new.php?post_type=portfolio">Portfolio</a> </li> <li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost/dilog/wp-admin/user-new.php">User</a> </li> </ul> </div> </li> <li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost/dilog/wp-admin/post.php?post=941&amp;action=edit">Edit Page</a> </li> </ul> <ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> <li id="wp-admin-bar-search" class="admin-bar-search"> <div class="ab-item ab-empty-item" tabindex="-1"> <form action="http://localhost/dilog/" method="get" id="adminbarsearch"> <input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"> <input type="submit" class="adminbar-button" value="Search"> </form> </div> </li> <li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost/dilog/wp-admin/profile.php" title="My Account">Howdy, tommy<img alt="" src="http://0.gravatar.com/avatar/6688e432d845dc1dd2426b6d1cb3bf8e?s=26&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D26&amp;r=G" class="avatar avatar-26 photo" height="26" width="26"></a> <div class="ab-sub-wrapper"> <ul id="wp-admin-bar-user-actions" class="ab-submenu"> <li id="wp-admin-bar-user-info"> <a class="ab-item" tabindex="-1" href="http://localhost/dilog/wp-admin/profile.php"> <img alt="" src="http://0.gravatar.com/avatar/6688e432d845dc1dd2426b6d1cb3bf8e?s=64&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&amp;r=G" class="avatar avatar-64 photo" height="64" width="64"><span class="display-name">tommy</span> </a> </li> <li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost/dilog/wp-admin/profile.php">Edit My Profile</a> </li> <li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost/dilog/wp-login.php?action=logout&amp;_wpnonce=2ea0aaf0fb">Log Out</a> </li> </ul> </div> </li> </ul> </div> <a class="screen-reader-shortcut" href="http://localhost/dilog/wp-login.php?action=logout&amp;_wpnonce=2ea0aaf0fb">Log Out</a> </div> </body> </html> 

var id = document.getElementById('nav-container');
var sel = id.getElementsByTagName('select');
var option = sel.getElementsByTagName('option');
sel.remove(3);

Hi, I have the above Javascript to hide the 3rd option in the select box shown below: 嗨,我有上面的Javascript隐藏了下面显示的选择框中的第3个选项: 在此处输入图片说明

However, the last line, sel.remove(3); 但是,最后一行sel.remove(3); does not seem to work. 似乎不起作用。 I get an error of Uncaught TypeError: undefined is not a function?page_id=1361:188 (anonymous function) 我收到Uncaught TypeError: undefined is not a function?page_id=1361:188 (anonymous function)的错误Uncaught TypeError: undefined is not a function?page_id=1361:188 (anonymous function)

Did I use the wrong function? 我使用了错误的功能吗? Any suggestions on how to modify my codes? 关于如何修改我的代码有什么建议吗? Thanks. 谢谢。

id.getElementsByTagName('select') is returning a list of elements, of which there is only one. id.getElementsByTagName('select')返回一个元素列表,其中只有一个。 If there is only one select element, you should be able to change this: 如果只有一个选择元素,则应该可以更改此元素:

var option = sel.getElementsByTagName('option');
sel.remove(3);

to this: 对此:

var option = sel[0].getElementsByTagName('option'); //was causing error
sel[0].remove(2); //assuming you want to remove 3rd element, not index 3

 document.getElementById("sel").remove(1); var selAry = document.getElementsByTagName("select"); selAry[0].remove(0); 
 <select id="sel"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 

document.getElementById("sel") returns a collection of matched elements, so if you want to access one of them, use array index like selAry[0] . document.getElementById("sel")返回匹配元素的集合,因此,如果要访问其中一个,请使用selAry[0]类的数组索引。

Apparently there's another script that was interfering with the script I have written, therefore I added a few lines before my script to make it load after my page is fully loaded: 显然还有另一个脚本正在干扰我编写的脚本,因此我在脚本之前添加了几行以使其在页面完全加载后加载:

$( document ).ready(function() {
  $("#nav-container > select > option:eq(2)").remove();
  $("#nav-container > select > option:eq(7)").remove();
  $("#nav-container > select > option:eq(10)").remove();
});

And thus, this solved my problem. 因此,这解决了我的问题。 Thanks to everyone who helped! 感谢所有提供帮助的人!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM