javascript - 将下拉列表添加到通过 Javascript 生成的元素

Question

以下代码动态添加 WordPress 类别作为杂志插件的水平选项卡。

我需要使主题显示为下拉列表。

负责的职能是:

    function sort_buttons()
    {
        $sort_terms = get_terms( $this->atts['taxonomy'] , array('hide_empty'=>true) );

        $current_page_terms = array();
        $term_count         = array();
        $display_terms      = is_array($this->atts['categories']) ? $this->atts['categories'] : array_filter(explode(',',$this->atts['categories']));

        $output = "<div class='av-magazine-sort ' data-magazine-id='".self::$magazine."' >";

        $first_item_name = apply_filters('avf_magazine_sort_first_label', __('All','avia_framework' ), $this->atts);
        $output .= "<div class='av-sort-by-term'>";
        $output .= '<a href="#" data-filter="sort_all" class="all_sort_button active_sort"><span class="inner_sort_button"><span>'.$first_item_name.'</span></span></a>';

        foreach($sort_terms as $term)
        {   
            if (!in_array($term->term_id, $display_terms)) continue;

            if(!isset($term_count[$term->term_id])) $term_count[$term->term_id] = 0;
            $term->slug = str_replace('%', '', $term->slug);

            $output .=  "<span class='text-sep {$term->slug}_sort_sep'>/</span>";
            $output .=  '<a href="#" data-filter="sort_'.$term->term_id.'" class="'.$term->slug.'_sort_button " ><span class="inner_sort_button">';
            $output .=      "<span>".esc_html(trim($term->name))."</span>";
            $output .=      "</span>";
            $output .=  "</a>";

            $this->atts['extra_categories'][] = $term->term_id;
        }

        $output .= "</div></div>";

        if(count($this->atts['extra_categories']) <= 1) return "";

        return $output;


    }

我尝试添加以下代码，其中下拉列表成功显示，但链接不起作用。

    function sort_buttons()
    {
        $sort_terms = get_terms( $this->atts['taxonomy'] , array('hide_empty'=>true) );

        $current_page_terms = array();
        $term_count         = array();
        $display_terms      = is_array($this->atts['categories']) ? $this->atts['categories'] : array_filter(explode(',',$this->atts['categories']));

        $output = "<div class='av-magazine-sort ' data-magazine-id='".self::$magazine."' >";

        $first_item_name = apply_filters('avf_magazine_sort_first_label', __('All','avia_framework' ), $this->atts);
        $output .= "<div class='av-sort-by-term'><select>";
        $output .= '<option><a href="#" data-filter="sort_all" class="all_sort_button active_sort"><span class="inner_sort_button"><span>'.$first_item_name.'</span></span></a></option>';

        foreach($sort_terms as $term)
        {   
            if (!in_array($term->term_id, $display_terms)) continue;

            if(!isset($term_count[$term->term_id])) $term_count[$term->term_id] = 0;
            $term->slug = str_replace('%', '', $term->slug);

            $output .=  "<span class='text-sep {$term->slug}_sort_sep'>/</span>";
            $output .=  '<option><a href="#" data-filter="sort_'.$term->term_id.'" class="'.$term->slug.'_sort_button " ><span class="inner_sort_button">';
            $output .=      "<span>".esc_html(trim($term->name))."</span>";
            $output .=      "</span>";
            $output .=  "</option></a>";

            $this->atts['extra_categories'][] = $term->term_id;
        }

        $output .= "</select></div></div>";

        if(count($this->atts['extra_categories']) <= 1) return "";

        return $output;


    }

Answer 1

<option>内的链接标签是不允许的并且不会起作用。以下是非工作 <select> 的示例快速而肮脏的解决方案 <select>如果您有链接列表。

<p>
    Non-working example:<br/>
    <select name="example1">
        <option value="" selected>Select one</option>
        <option><a href="http://www.stackoverflow.com">Stack Overflow</a></option>
        <option><a href="http://www.w3.org">W3C</a></option>
        <option><a href="http://www.alistapart.com">A List Apart</a></option>
    </select>
</p>
<p>
    Working example:<br/>
    <select name="example2" onchange="if(this.selectedIndex > 0){ window.location = this.options[this.selectedIndex].value; }">
        <option value="" selected>Select one</option>
        <option value="http://www.stackoverflow.com">Stack Overflow</option>
        <option value="http://www.w3.org">W3C</option>
        <option value="http://www.alistapart.com">A List Apart</option>
    </select>
</p>

但是您的链接有 #作为带有 data- 的 URL属性意味着上面的解决方案将不起作用。您需要使用下拉菜单(寻找纯 CSS 或 CSS/JS 下拉菜单代码)。下面只是一个示例，如 http://codepen.io/andornagy/pen/xhiJH 所示。 :

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #FFF;
	font-size:22px;
	line-height: 32px;
	color: #000;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 24px;
	text-align: center;
	color: #000;
}	

h3 {
	font-size: 16px;
	text-align: center;
	color: #000;
}

h3 a {
	color: #000;
}

a {
	color: #000;
}

h1 {
	margin-top: 50px;
	text-align:center;
	font-size:24px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

#relatedContent {
  max-width: 800px;
  margin: 200px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}	

nav { 
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px;
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Design</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Tutorials</a>
            	<!-- Second Tier Drop Down -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Other</a>
                        <!-- Third Tier Drop Down -->
                        <ul>
                            <li><a href="#">Stuff</a></li>
                            <li><a href="#">Things</a></li>
                            <li><a href="#">Other Stuff</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
        </ul>
    </nav>
  <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://andornagy.com/css-dropdown-menu/">here</a></p>
</div>