下拉菜单文字搜索过滤器

问题描述 投票：-1回答：2

我只想向我的博客寻求帮助。如何连接labels的两个下拉列表框。为了进一步解释它，我想在标签的第一个下拉列表框中选择一个类别，例如，我选择“ love”，它将显示所有带有“ love”标签的帖子，当我选择一个类别时在国家/地区label的第二个下拉列表框中（例如加拿大），它将显示所有带有加拿大标签的爱情标签。当我从第二个下拉列表框中选择标签时会发生什么，它会从头开始重设第一个下拉菜单，这意味着所有内容都显示其中带有加拿大标签的帖子，而没有考虑我从第一个下拉列表中选择的第一个标签框。

我已经找到了这个.. Working example

如何在博客上进行同样的操作？

<b:section class='sectopbar' id='sectopbar' showaddelement='yes'>
    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
        <b:includable id='main'>
            <b:if cond='data:title'>
                <h2 />
            </b:if>
            <div class='widget-   content'>
                <br />
                <select onchange='location=this.options[this.selectedIndex].value;'>
                    <option>Select a   Category</option>
                    <b:loop values='data:labels' var='label'>
                        <option expr:value='data:label.url'>
                            <data:label.name /> (<data:label.count />)
                        </option>
                    </b:loop>
                </select>
                <b:include name='quickedit' />
            </div>
        </b:includable>
    </b:widget>
</b:section>
<div>
    <b:section class='sectopbar2' id='sectopbar2' showaddelement='yes'>
        <b:widget id='Label2' locked='false' title='Labels' type='Label'>
            <b:includable id='main'>
                <b:if cond='data:title'>
                    <h2 />
                </b:if>
                <div class='widget- content'>
                    <br />
                    <select onchange='location=this.options[this.selectedIndex].value;'>
                        <option>Select a Country</option>
                        <b:loop values='data:labels' var='label'>
                            <option expr:value='data:label.url'>
                                <data:label.name /> (<data:label.count />)
                            </option>
                        </b:loop>
                    </select>
                    <b:include name='quickedit' />
                </div>
            </b:includable>
        </b:widget>
    </b:section
javascript html label blogger
2个回答
0
投票

已解决

在博客中添加新的小部件并粘贴此脚本

<!DOCTYPE html>
<html>
<body>
<div class="tabs-outer">
    <div class="tabs-cap-top cap-top">
        <div class="cap-left"></div>
        <div class="cap-right"></div>
    </div>
    <div class="fauxborder-left tabs-fauxborder-left">
        <div class="fauxborder-right tabs-fauxborder-right"></div>
        <div class="region-inner tabs-inner">
            <div class="tabs section" id="crosscol">
                <div class="widget HTML" id="HTML3">
                    <h2 class="title">Multi Label Search</h2>
                    <div class="widget-content">
                        <div id="multi-search">
                            <select id="cmbColumn" name="cmbColumn">
                                <option value="">Columns</option>
                                <option value="1%20Column+">1 Column</option>
                                <option value="2%20Column+">2 Column</option>
                                <option value="3%20Column+">3 Column</option>
                                <option value="4%20Column+">4 Column</option>
                            </select>
                            <select id="cmbSidebar" name="cmbSidebar">
                                <option value="">Sidebars</option>
                                <option value="1%20Left%20Sidebar+">1 Left Sidebar</option>
                                <option value="2%20Left%20Sidebar+">2 Left Sidebar</option>
                                <option value="1%20Right%20Sidebar+">1 Right Sidebar</option>
                                <option value="2%20Right%20Sidebar+">2 Right Sidebar</option>
                                <option value="Left%20and%20Right+">Left and Right</option>
                            </select>
                            <select id="cmbColor" name="cmbColor">
                                <option value="">Colors</option>
                                <option value="Black+">Black</option>
                                <option value="Blue+">Blue</option>
                                <option value="Brown+">Brown</option>
                                <option value="Green+">Green</option>
                                <option value="Gray+">Gray</option>
                                <option value="Orange+">Orange</option>
                                <option value="Pink+">Pink</option>
                                <option value="Red+">Red</option>
                                <option value="Violet+">Violet</option>
                                <option value="White+">White</option>
                                <option value="Yellow+">Yellow</option>
                            </select>
                            <select id="cmbFeatures" name="cmbFeatures">
                                <option value="">Features</option>
                                <option value="Ads%20Ready">Ads Ready</option>
                                <option value="Bookmark%20Ready">Bookmark Ready</option>
                                <option value="Custom%20Navbar">Custom Navbar</option>
                                <option value="Page%20Number">Page Number</option>
                                <option value="Slideshow">Slideshow</option>
                            </select>
                            <input onclick=" getValue() " value="Filter" type="button">
                        </div>
                    </div>
                    <div class="clear"></div>
                    <span class="widget-item-control">
                            <span class="item-control blog-admin">
                                <a class="quickedit" href="//www.blogger.com/rearrange?blogID=4472703516037708465&amp;widgetType=HTML&amp;widgetId=HTML3&amp;action=editWidget&amp;sectionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML3&quot;)); " target="configHTML3" title="Edit">
                                    <img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18">
                                </a>
                            </span>
                        </span>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="tabs section" id="crosscol-overflow"></div>
        </div>
    </div>
    <div class="tabs-cap-bottom cap-bottom">
        <div class="cap-left"></div>
        <div class="cap-right"></div>
    </div>
</div>
<script type="text/javascript">
    function getValue() {
        var valcmbColumn = document.getElementById("cmbColumn").value;
        valcmbSidebar = document.getElementById("cmbSidebar").value;
        valcmbColor = document.getElementById("cmbColor").value;
        valcmbFeatures = document.getElementById("cmbFeatures").value;
        valOutput = (valcmbColumn + valcmbSidebar + valcmbColor + valcmbFeatures);
        window.open("/search/label/" + valOutput, "_self");
    }

    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == "block") {
            e.style.display = "none";
        } else {
            e.style.display = "block";
        }
    }
</script>

</body>
</html>
0
投票

不错！谢谢你

两个问题...

1）如何添加更多过滤器选项？2）如何为框过滤器添加样式？

谢谢。

最佳

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.