Добавление <select> с помощью javascript в панель администратора. Работает в Chrome / Safari, а не в Firefox

Я пытаюсь добавить новый пункт меню в панель администратора WordPress. Элемент подменю содержит выделение для переключения тем. В Firefox с href => false он сгенерировал <a href=""> и когда я щелкнул, выберите его, чтобы перезагрузить страницу. Я изменил его на <a href="#"> . Это фиксировало перезагрузку страницы при нажатии на выбор … но javascript не работает.

Сам код прекрасно работает в Chrome и Safari на Mac. Я еще не тестировал IE или любые браузеры в Windows. В Firefox на Mac он ничего не делает.

Вот код, созданный плагином:

 <li id="wp-admin-bar-switch_themes" class="menupop"> <a href="#"><span>Switch Themes</span></a> <ul> <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=""> <a href="#"> <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;"> <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option> <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option> </select> </a> </li> </ul> </li> 

Ничего особенного в коде для создания элементов панели администратора …

 $wp_admin_bar->add_menu( array( 'id' => 'switch_themes', 'title' => __( 'Switch Themes', 'textdomain' ), 'href' => '#' ) ); $wp_admin_bar->add_menu( array( 'parent' => 'switch_themes', 'title' => $theme_switcher->theme_switcher_markup('dropdown'), 'href' => '#' ) ); 

Solutions Collecting From Web of "Добавление <select> с помощью javascript в панель администратора. Работает в Chrome / Safari, а не в Firefox"

Очевидно, вы не можете поместить выделенный тег внутри якоря A. Что происходит, это связано с бурлящим событием: Firefox берет на себя анкерный щелчок A, а не элемент управления select.

Измените свой html на:

  <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=""> <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;"> <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option> <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option> </select> </li> 

и он должен работать кросс-платформенно.

Если вы хотите добавить контент в элемент меню за пределами тега <a> , вы можете добавить его в аргумент ['meta']['html'] . Таким образом, ваш код будет выглядеть так:

 $wp_admin_bar->add_menu( array( 'parent' => 'switch_themes', 'meta' => array( 'html' => $theme_switcher->theme_switcher_markup( 'dropdown' ), ), 'href' => '#', 'title' => ' ', // An empty title will not be accepted 'id' => 'wpse17434_child', // If the title is empty, you need to specify the ID yourself ) ); 

Это создаст уродливый пустой блок <a> над вашим выпадающим списком, но вы можете скрыть это с правильным стилем.

Считаете ли вы, что вы не используете раскрывающийся список, а просто подменю, чтобы перечислить разные темы? Это будет больше соответствовать текущему стилю меню.

Поскольку я не мог редактировать теги, которые были добавлены, но я мог редактировать, что было внутри них, я добавил закрывающий тег и снова открыл новый тег в конце того, что я вставлял. Затем просто использовал CSS, чтобы скрыть пустую строку, которую они добавляли вокруг моего контента. Также установите href на оба тега на # ….

Исправлена ​​проблема с Firefox, которая, казалось, была единственной достаточно разборчивой … даже валидатор W3 сказал, что код в порядке.

Вот получившийся код:

 <li id="wp-admin-bar-switch_themes" class="menupop"> <a href="#"><span>Switch Themes</span></a> <ul> <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=" themeswitchermenu"> <a href="#"></a> <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none; margin: 10px;"> <option>Blah</option> </select><a href="#"></a> </li> </ul> </li>