选择选项排序最后一个选项变为第一个

Question

我有一个修复选择html。如何使用jQuery更改修复选择选项并使最后一个选项自动成为第一个选项

<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>

我需要的是更改，请选择所有成为首选。 我使用反向阅读但仍然不起作用。如果有人可以帮忙。

<select class="terms" id="128035">
<option class="term" id="-1">-- Please Select --</option>
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
</select>

Answer 1

下面的代码所做的是记住节点，然后放置在所需的位置，同时将其作为前置函数逻辑的一部分从父节点中删除。

var last = $('#-1')
$('#128035').prepend(last)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>

您也可以在没有带有选定属性的 jQuery 的情况下执行此操作。只需将此行放在选择块内的任何位置即可。

<option selected="selected">-- Select me--</option>

还值得注意的是，不建议使用纯数字作为 HTML 元素的 id。让它id="a1"，id="a2"什么的。

Answer 2

试试这个：

$('#128035 option[id="-1"]').insertBefore('#128035 option:first');
$("#128035").val($("#128035 option:first").val());

第一行将optionid=-1移动到第一个option之前

第二行将第一个option设置为selected。

$('#128035 option[id="-1"]').insertBefore('#128035 option:first');
$("#128035").val($("#128035 option:first").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>

选项 2

$('#128035 option[id="-1"]').insertBefore('#128035 option[id="1"]');
$("#128035").val($("#128035 option:first").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>

Answer 3

使用 ：first((，：last(( 和 .before((。试试这个：

$("select option:first").before($("select option:last")); //this will move last option before first option.
$("select option:first").attr("selected",true); //this will select first option by default.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>

Answer 4

试试这个：

$( document ).ready(function() {
var options = $('#128035 option');
$(options[2]).insertBefore( $( options[ 0 ] ) );
$("#128035").val($("#128035 option:first").val());
});

使用insertBefore或insertAfter插入非常容易，然后您只需将第一个选项的默认值设置为您的选择。

JSFIDDLE： https://jsfiddle.net/hj7vL9xy/

Answer 5

您可以使用:last和:first将最后一个选项视为第一个选项。

在下面的代码中，:last将获得最后一个选项，:first用于insertBefore第一个选项：

$('#128035 option:last').insertBefore('#128035 option:first');
$('#128035').val($('#128035 option:first').val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="terms" id="128035">
<option class="term" id="1">ans1</option>
<option class="term" id="2">ans2</option>
<option class="term" id="-1">-- Please Select --</option>
</select>