Change order of radio button: display the checked above the drop down list

Question

I would like to have 3 radios visible and the others hidden in a drop-down. When a radio from the drop-down is selected, I would like it to move to the first place among the visible radio. The 3rd (or now the 4th) visible radio should move into the drop-down so that I always only have 3 radios visible.

I can't simply change the label because I use the radios' ID in the remaining script (cf the last line in the js script below):

I would like to use only vanilla JS (no Jquery...).

Here is my 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>

Here is my 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

Try this one

 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>

Change order of radio button: display the checked above the drop down list

Question

1 answers

solution1
1 ACCPTED 2019-08-08 14:40:57

Change order of radio button: display the checked above the drop down list

Question

1 answers

solution1 1 ACCPTED 2019-08-08 14:40:57

solution1
1 ACCPTED 2019-08-08 14:40:57