单选按钮的更改顺序：在下拉列表上方显示选中的选项

Question

我想看到3个收音机，而其他的隐藏在下拉菜单中。 从下拉菜单中选择一个收音机后，我希望它移至可见收音机中的第一位。 第3个（或现在第4个）可见广播应该移到下拉列表中，这样我始终只有3个可见广播。

我不能简单地更改label因为我在其余脚本中使用了无线电的ID（请参见下面的js脚本中的最后一行）：

我只想使用普通JS （没有Jquery ...）。

这是我的html：

<div id="sourcecontainer">
    <div> From
        <div>
            <input type="radio" id="fr" name="source" value="fr">
            <label for="fr">fr</label>
        </div>
        <div>
            <input type="radio" id="en" name="source" value="en">
            <label for="en">en</label>
        </div>
        <div>
            <input type="radio" id="auto" name="source" value="auto" checked>
            <label for="auto">auto</label>
        </div>
        <nav id="topNav">
            <a href="#" title="Others" id="othersLanguageSource">Others</a>
            <ul id="listothersLanguageSource" style="list-style: none; display:none;">
                <li><input type="radio" id="pr1" name="source" value="1">Preset 1</li>
                <li><input type="radio" id="pr2" name="source" value="2">Preset 2</li>
                <li><input type="radio" id="pr3" name="source" value="3">Preset 3</li>
                <li><input type="radio" id="pr4" name="source" value="4">Preset 4</li>
            </ul>
        </nav>
    </div>
    <input id="text" type="text" value="" autofocus />
</div>

这是我的js：

... 
var menuTopNav = document.getElementById('topNav');
menuTopNav.addEventListener('mouseover', function () {
    var listothersLanguageSource = document.getElementById("listothersLanguageSource")
    listothersLanguageSource.style.display = "block";
    listothersLanguageSource.style.display = "block";
}, false);
menuTopNav.addEventListener('mouseout', function () {
    var listothersLanguageSource = document.getElementById("listothersLanguageSource")
    listothersLanguageSource.style.display = "none";
    listothersLanguageSource.style.display = "none";
}, false);

var sourceLang = document.querySelector('input[name="source"]:checked').value;
...
...

Answer 1

试试这个

 let langs = [ { id: 'en', value: 'en', text: 'en' }, { id: 'fr', value: 'fr', text: 'fr' }, { id: 'auto', value: 'auto', text: 'auto', checked: true }, { id: 'pr1', value: 'pr1', text: 'Preset 1' }, { id: 'pr2', value: 'pr2', text: 'Preset 2' }, { id: 'pr3', value: 'pr3', text: 'Preset 3' } ]; function render() { let mainLanguageSource = ''; let othersLanguageSource = ''; langs.forEach((item, index) => { if (index <= 2) { mainLanguageSource += '<div>' + '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>' + '<label for="' + langs[index].id + '">' + langs[index].text + '</label>' + '</div>'; } else { othersLanguageSource += '<li>' + '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>' + '<label for="' + langs[index].id + '">' + langs[index].text + '</label>' + '</li>'; } }); document .getElementById('mainLanguageSource') .innerHTML = mainLanguageSource; document .getElementById('listothersLanguageSource') .innerHTML = othersLanguageSource; // add event listeners document.querySelectorAll('[name="source"]').forEach(function(input) { input.addEventListener('change', function(event) { let position; langs.forEach((item, index) => { if (item.id === event.target.value) { position = index; item.checked = true; } else { delete item.checked; } }); langs.unshift(langs.splice(position, 1)[0]); render(); }); }); } render();

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="sourcecontainer"> <div> From <div id="mainLanguageSource"> <!-- Filled from js --> </div <nav id="topNav"> <a href="#" title="Others" id="othersLanguageSource">Others</a> <ul id="listothersLanguageSource" style="list-style:"> <!-- Filled from js --> </ul> </nav> </div> <input id="text" type="text" value="" autofocus /> </div> </body> </html>

单选按钮的更改顺序：在下拉列表上方显示选中的选项

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-08 14:40:57

单选按钮的更改顺序：在下拉列表上方显示选中的选项

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-08 14:40:57

解决方案1
1 已采纳 2019-08-08 14:40:57