如何获取选择选项内的复选框

问题描述 投票:-8回答:1

我想在选择选项中获取复选框。似乎选择选项不能有复选框。另一种方法是使用简单的HTML元素?我需要能够从下拉列表中多选选项。我需要让它像多选一样工作。无法获得multiselct的外观和感觉。

<dl class="dropdown"> 

    <dt>
    <a href="#">
      <span class="hida">Select</span>    
      <p class="multiSel"></p>  
    </a>
    </dt>

    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="one" />one</li>
                <li>
                    <input type="checkbox" value="two" />two</li>
                <li>
                    <input type="checkbox" value="three" />three</li>
                <li>
            </ul>
        </div>
    </dd>
</dl>

使用Javascript

var ahead = document.getElementsByTagName('a');
var selectdd = document.getElementsByTagName('dd');
var anySelect = document.querySelectorAll('.mutliSelect input');
var selectedStore = [];
console.log(ahead);
console.log(anySelect);

var cb = function(e){
console.log(e);
console.log(selectdd);
selectdd[0].style.display = 'block';
}

var selectCb = function(e){
var selectedVal = e.target.value;
debugger
selectedStore.push(selectedVal);
}

function addEventListenerList(list, event, fn) {
    for (var i = 0, len = list.length; i < len; i++) {
        list[i].addEventListener(event, fn, false);
    }
}

ahead[0].addEventListener('click',cb);
addEventListenerList(anySelect, 'click', selectCb);


console.log("Store status = ",selectedStore);
javascript html css html5
1个回答
0
投票

选择选项不能包含复选框,请检查HTML规范中哪些是有效的,哪些不是。见:https://www.w3.org/TR/html52/sec-forms.html#the-option-element

© www.soinside.com 2019 - 2024. All rights reserved.