html 选择到radio.html

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 选择到radio.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head></head>
<body>
<select name="test_name" id="test_options">
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
</select>

http://media02.hongkiat.com/shopping-cart-designs/10-Hulala-Header-by-Paresh-Khatri.jpg
<script>
(function(){
    var select_elm = document.getElementById('test_options');
    var elm_name = select_elm.name;
    var children_nodes = select_elm.children;
    var html = '<div class="radios">';
    function removeNode(elm) {
        if (elm.parentNode) {
          elm.parentNode.removeChild(elm);
        }
    }

    for (var i = 0; i < children_nodes.length; i++) {
        html += '<label><input type="radio" name="' + elm_name + '" ';
        html += 'value="' + children_nodes[i].textContent + '">';
        html += children_nodes[i].textContent + ' some other text';
        html += '</label>';
    };
    html += '</div>';
    select_elm.insertAdjacentHTML('afterend', html);
    removeNode(select_elm);
}());
</script>
</body>
</html>

以上是关于html 选择到radio.html的主要内容，如果未能解决你的问题，请参考以下文章

使用 JQuery 将选择属性添加到 Html.DropDownList