时间戳

首页 > 解决方案 > 将 Select 的选项替换为 Checkbox

javascript - 将 Select 的选项替换为 Checkbox

问题描述

早上好，我正在尝试替换每个选择复选框的选项，以便能够提供更好的样式并改进它所实现的功能，但是在将其更改为复选框时，它不能实现它与选项的功能，它实现的功能是在每个Select中搜索选中的标签，它是针对Blogger的。

我希望让您单击每个 Select 中的选定复选框。但是我一直没有成功，希望大家能帮帮我，非常感谢！

<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">Buscador Avanzado</h2>
                    <div class="widget-content">
                        <div id="multi-search">
                            <select class="cmbColumn" id="cmbColumn" name="cmbColumn[]" multiple>
                               <input type="Checkbox" name="cmbColumn[]" value="acción+" />1
                                <input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
                                <input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
                                <input type="Checkbox" name="cmbColumn[]" value="TV" /> TV
                            </select>
                            <select class="cmbSidebar" id="cmbSidebar" name="cmbSidebar[]" multiple>
<input type="checkbox" name="cmbSidebar[]" value="TV+" />1
<input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
                                <input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
                                <input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
                                <input type="checkbox" name="cmbSidebar[]" value="TV" /> TV
                            </select>
                            <select class="cmbColor" id="cmbColor" name="cmbColor[]" multiple>
                                <input type="checkbox" name="cmbColor[]" value="TV" />1
                                <input type="checkbox" name="cmbColor[]" value="TV" /> TV
                                <input type="checkbox" name="cmbColor[]" value="TV" /> TV
                      </select>
                            <input class="filtro" onclick=" getValue() " value="Filtrar" 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>

<script type="text/javascript">
    function getValue() {
        var valcmbColumn = document.getElementById("cmbColumn").value;
        valcmbSidebar = document.getElementById("cmbSidebar").value;
        valcmbColor = document.getElementById("cmbColor").value;
        valOutput = (valcmbColumn + valcmbSidebar + valcmbColor);
        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></div>

标签： javascripthtmlblogger

解决方案

正如 Scott Marcus 所提到的，您必须制作自己的下拉组件才能为某种选择添加复选标记。

像这样的东西：

只需让 span 元素看起来像一个选择选项，如果你愿意的话，让它可以点击而不是悬停。

您还可以根据自己的喜好设置选择 div 的样式。

.selections{
  transform:scaleY(0);
  transition: all 0.5s;
  transform-origin:top;
  height:0;
}
.selector{
  cursor:pointer;
}
.selector:hover .selections{
  transform:scaleY(1);
  height:auto;
  border: 1px solid red;
  width:200px;
  margin-top:5px;
}
<div class="selector"><span style="border:1px solid red">Hover me and style me as select</span>
  <div id="selections" class="selections">
    <input type="checkbox" value="Something" /> Something <br />
    <input type="checkbox" value="Something" /> Something <br />
    <input type="checkbox" value="Something" /> Something <br />
    <input type="checkbox" value="Something" /> Something <br />
    <input type="checkbox" value="Something" /> Something <br />
  </div>
</div>

推荐阅读