从iOS中的选择框中删除选项值

时间:2013-03-12 17:59:43

标签: jquery ios wordpress wordpress-plugin option

此脚本无法正常工作,我在iPhone上查看时仍可在选择菜单中看到它

<nav class="primary">
        <select class="select-menu" style="">
    <option value="#">Navigate to...</option>
    <option value="http://www.mphclub.com/">&nbsp;Home</option>
    <option value="http://www.mphclub.com/exotic-car-rental">&nbsp;Fleet</option>
    <option value="javascript:void(0)">&nbsp;–</option>
    <option value="http://www.mphclub.com/mercedes-benz-cls-amg">&nbsp;–Mercedes Benz CLS 6.3 AMG</option>
    <option value="http://mphclub.com/mercedes-benz-cls-amg">&nbsp;– </option>
</select>
</nav>

和....

    <script type="text/javascript">
jQuery(function($) { 
$(".select-menu option[value='http://mphclub.com/mercedes-benz-cls-amg']").remove();});</script>

额外标记在主站点上不可见,但是当您在iphone上查看时,您可以将所有链接视为值选项。

这必须影响它的一些方式

(function($){
$.fn.mobileMenu = function(options) {

 var defaults = {
   defaultText: 'Navigate to...',
   className: 'select-menu',
   subMenuClass: 'sub-menu',
   subMenuDash: '&ndash;'
  },
  settings = $.extend( defaults, options ),
  el = $(this);

 this.each(function(){
  // ad class to submenu list
  el.find('ul').addClass(settings.subMenuClass);

  // Create base menu
  $('<select />',{
   'class' : settings.className
  }).insertAfter( el );

  // Create default option
  $('<option />', {
   "value"  : '#',
   "text"  : settings.defaultText
  }).appendTo( '.' + settings.className );

  // Create select option from menu
  el.find('a,.separator').each(function(){
   var $this  = $(this),
     optText = $this.text(),
     optSub = $this.parents( '.' + settings.subMenuClass ),
     len   = optSub.length,
     dash;

 // if menu has sub menu
   if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
   dash = Array( len+1 ).join( settings.subMenuDash );
    optText = dash + optText;

   }

   if($this.is('span')){
    // Now build menu and append it
   $('<optgroup />', {
    "label" : optText,
   }).appendTo( '.' + settings.className );
   }
   else{
    // Now build menu and append it
   $('<option />', {
    "value" : this.href,
    "html" : optText,
    "selected" : (this.href == window.location.href)
   }).appendTo( '.' + settings.className );
   }

  }); // End el.find('a').each

  // Change event on select element
  $('.' + settings.className).change(function(){
   var locations = $(this).val();
   if( locations !== '#' ) {
    window.location.href = $(this).val();
   }
  });
  $('.select-menu').show();

 });
 return this;
};
})(jQuery);

2 个答案:

答案 0 :(得分:0)

请确保您引用了jQuery库,将其添加到 head 标记中:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

上面的所有代码都是正确的。将它放在头部标签内,在引用jQuery的脚本下。

<script type="text/javascript">
    jQuery(function($) { 
        $(".select-menu option[value='http://mphclub.com/mercedes-benz-cls-amg']").remove();
    });
</script>

答案 1 :(得分:0)

我遇到的问题是选项界面(我发布的最后一行代码)正在调用其中包含“href”的所有值,以显示在下拉菜单中。这可以通过更改菜单项而不是然后使用css将div更改为链接来解决。感谢所有帮助我的人!