问题
I would just like to ask some help regarding my blog. How do I connect the two drop down list boxes of labels. To explain it further what I wanted to do is, I chose a category on the first drop down list box of label, for example I chose "love" it will show all the posts that has a label of love and when I choose a category from the second drop down list box of label of countries for example Canada it will show all the labels of love with a label of Canada in it. What happens when I choose a label from the second drop down list box it resets the first drop down from scratch meaning it all shows the posts which has a label of Canada in it without considering the first label that I chose from the first drop down list box.
I HAVE FOUND THIS.. Working example
How I can do same on my blog?
<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
回答1:
Just Solved
Add new widget in blog and paste this script
<!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&widgetType=HTML&widgetId=HTML3&action=editWidget&sectionId=crosscol" onclick=" return _WidgetManager._PopupConfig(document.getElementById("HTML3")); " 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>
来源：https://stackoverflow.com/questions/25406754/dropdown-menu-lebal-search-filter