将选择的选项行移到最后

时间:2018-11-25 03:49:45

标签: javascript html

我试图在按下或选择时将选择标签上的选定选项强制为最后一个索引。到目前为止,我看到的唯一纯Javascript解决方案就是:Move <option> to top of list with Javascript

除了我尝试更改它以使所选的选项转到最后。 它对我不起作用,因为它只是删除所选的选项行,而不会创建另一个选项行并将其放置在最后一个索引上。

这是HTML代码:

<!-- 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>

和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>

我们非常感谢您的帮助。如果可能的话使用Javascript。谢谢!

1 个答案:

答案 0 :(得分:0)

如果删除了选定的选项并使用append方法将其作为最后一个子项插入到select中,该怎么办:

var select = document.getElementById("combo-box");
var option = select.options[select.selectedIndex];
select.removeChild(option);
select.append(option);