Move selected option line to the last
I am trying to force the selected option on a select tag to be on the last index when it is pressed or chosen. So far, the only pure Javascript solution that I saw is this one : Move <option> to top of list with Javascript
Except that I tried changing it so that the chosen option goes to the very last.
It didn't work for me because it just deletes the chosen option line and does not create another one and place it on the last index.
Here is the HTML code:
<!-- Created select tag so user can access history of talk -->
<div style="top:60px;position:absolute;z-index:2" id="speechBox">
<!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
<select id = 'combo-box' title = "Saved Talk" onchange="goLast();document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
</select>
<span class = "dropdown" name = "Saved Talk"></span>
<input id ="userText" name="userText" type="text" onfocus="this.select()" ></input>
<input name="idValue" id="idValue" type="hidden">
<button id="speakText" class="toolbutton" title="Speak"></button>
<hr>
</div>
And the Javascript:
<script>
function goLast(){
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.insertChild(option, select.lastChild);
}
</script>
Help is appreciated. Javascript if possible. Thanks!
javascript html
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
add a comment |
I am trying to force the selected option on a select tag to be on the last index when it is pressed or chosen. So far, the only pure Javascript solution that I saw is this one : Move <option> to top of list with Javascript
Except that I tried changing it so that the chosen option goes to the very last.
It didn't work for me because it just deletes the chosen option line and does not create another one and place it on the last index.
Here is the HTML code:
<!-- Created select tag so user can access history of talk -->
<div style="top:60px;position:absolute;z-index:2" id="speechBox">
<!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
<select id = 'combo-box' title = "Saved Talk" onchange="goLast();document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
</select>
<span class = "dropdown" name = "Saved Talk"></span>
<input id ="userText" name="userText" type="text" onfocus="this.select()" ></input>
<input name="idValue" id="idValue" type="hidden">
<button id="speakText" class="toolbutton" title="Speak"></button>
<hr>
</div>
And the Javascript:
<script>
function goLast(){
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.insertChild(option, select.lastChild);
}
</script>
Help is appreciated. Javascript if possible. Thanks!
javascript html
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
add a comment |
I am trying to force the selected option on a select tag to be on the last index when it is pressed or chosen. So far, the only pure Javascript solution that I saw is this one : Move <option> to top of list with Javascript
Except that I tried changing it so that the chosen option goes to the very last.
It didn't work for me because it just deletes the chosen option line and does not create another one and place it on the last index.
Here is the HTML code:
<!-- Created select tag so user can access history of talk -->
<div style="top:60px;position:absolute;z-index:2" id="speechBox">
<!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
<select id = 'combo-box' title = "Saved Talk" onchange="goLast();document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
</select>
<span class = "dropdown" name = "Saved Talk"></span>
<input id ="userText" name="userText" type="text" onfocus="this.select()" ></input>
<input name="idValue" id="idValue" type="hidden">
<button id="speakText" class="toolbutton" title="Speak"></button>
<hr>
</div>
And the Javascript:
<script>
function goLast(){
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.insertChild(option, select.lastChild);
}
</script>
Help is appreciated. Javascript if possible. Thanks!
javascript html
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
I am trying to force the selected option on a select tag to be on the last index when it is pressed or chosen. So far, the only pure Javascript solution that I saw is this one : Move <option> to top of list with Javascript
Except that I tried changing it so that the chosen option goes to the very last.
It didn't work for me because it just deletes the chosen option line and does not create another one and place it on the last index.
Here is the HTML code:
<!-- Created select tag so user can access history of talk -->
<div style="top:60px;position:absolute;z-index:2" id="speechBox">
<!-- The select tag acts like a drop down button, so it passes its value to the input box and not to itself -->
<select id = 'combo-box' title = "Saved Talk" onchange="goLast();document.getElementById('userText').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
</select>
<span class = "dropdown" name = "Saved Talk"></span>
<input id ="userText" name="userText" type="text" onfocus="this.select()" ></input>
<input name="idValue" id="idValue" type="hidden">
<button id="speakText" class="toolbutton" title="Speak"></button>
<hr>
</div>
And the Javascript:
<script>
function goLast(){
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.insertChild(option, select.lastChild);
}
</script>
Help is appreciated. Javascript if possible. Thanks!
javascript html
javascript html
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
asked Nov 25 '18 at 3:49
Andrea G.Andrea G.
134
134
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What if you removed the selected option and used the append method to insert it as the last child into the select:
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);
answered Nov 25 '18 at 4:02
TalTal
263
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464493%2fmove-selected-option-line-to-the-last%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What if you removed the selected option and used the append method to insert it as the last child into the select:
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);
answered Nov 25 '18 at 4:02
TalTal
263
add a comment |
What if you removed the selected option and used the append method to insert it as the last child into the select:
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);
answered Nov 25 '18 at 4:02
TalTal
263
add a comment |
What if you removed the selected option and used the append method to insert it as the last child into the select:
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);
answered Nov 25 '18 at 4:02
TalTal
263
What if you removed the selected option and used the append method to insert it as the last child into the select:
var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);
answered Nov 25 '18 at 4:02
TalTal
263
answered Nov 25 '18 at 4:02
TalTal
263
answered Nov 25 '18 at 4:02
TalTal
263
answered Nov 25 '18 at 4:02
TalTal
263
263
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464493%2fmove-selected-option-line-to-the-last%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
