Заменить опцию Выбрать флажком - PullRequest
Новая
       52

Заменить опцию Выбрать флажком

0 голосов
/ 27 мая 2020

Доброе утро, я пытаюсь заменить параметры каждого из них. Установите флажок, чтобы иметь возможность придать лучший стиль и улучшить функциональные возможности, которые он выполняет, но при изменении его на флажок он не выполняет ту функцию, которую выполняет. с опцией. Функция, которую он выполняет, - это поиск выбранных тегов в каждом элементе 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>

1 Ответ

0 голосов
/ 28 мая 2020

Как упоминал Скотт Маркус, вам нужно будет создать свой собственный раскрывающийся компонент, чтобы добавить галочки в своего рода выбор.

Примерно так:

Просто сделайте так, чтобы элемент 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>
...