Intento realizar un pequeño buscador multi-etiqueta para mi blog de Blogger con el fin de que los usuarios puedan buscar a partir de uno o varios conceptos, articulos relacionados.
El problema es que necesitaría mas campos de filtro y editar su estilo. Lo he intentado de todas formas, pero por ahora no he tenido éxito.
Encontré este ejemplo:
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";
}
}
<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 value="1%20Column+" />1 Column
<option value="2%20Column+" />2 Column
<option value="3%20Column+" />3 Column
<option value="4%20Column+" />4 Column
</select>
<select id="cmbSidebar" name="cmbSidebar">
<option value="" />Sidebars
<option value="1%20Left%20Sidebar+" />1 Left Sidebar
<option value="2%20Left%20Sidebar+" />2 Left Sidebar
<option value="1%20Right%20Sidebar+" />1 Right Sidebar
<option value="2%20Right%20Sidebar+" />2 Right Sidebar
<option value="Left%20and%20Right+" />Left and Right
</select>
<select id="cmbColor" name="cmbColor">
<option value="" />Colors
<option value="Black+" />Black
<option value="Blue+" />Blue
<option value="Brown+" />Brown
<option value="Green+" />Green
<option value="Gray+" />Gray
<option value="Orange+" />Orange
<option value="Pink+" />Pink
<option value="Red+" />Red
<option value="Violet+" />Violet
<option value="White+" />White
<option value="Yellow+" />Yellow
</select>
<select id="cmbFeatures" name="cmbFeatures">
<option value="" />Features
<option value="Ads%20Ready" />Ads Ready
<option value="Bookmark%20Ready" />Bookmark Ready
<option value="Custom%20Navbar" />Custom Navbar
<option value="Page%20Number" />Page Number
<option value="Slideshow" />Slideshow
</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>
He conseguido añadir más opciones en cada desplegable, lo que me está resultando imposible es añadir más desplegables y editar su estilo.