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

时间:2017-08-03 06:28:02

标签: javascript php jquery html drop-down-menu

我有一个修复选择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>

5 个答案:

答案 0 :(得分: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的情况下执行此操作。只需将此行放在select块内的任何位置。

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

另外值得注意的是,不建议使用普通数字作为HTML元素的id。设为id="a1"id="a2"或其他内容。

答案 1 :(得分:0)

试试这个:

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

$("#128035").val($("#128035 option:first").val());

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

第二行将第一个option设为selected

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

$("#128035").val($("#128035 option:first").val());
&#13;
<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>
&#13;
&#13;
&#13;

选项2

&#13;
&#13;
$('#128035 option[id="-1"]').insertBefore('#128035 option[id="1"]');

$("#128035").val($("#128035 option:first").val());
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

使用:first():last().before()。试试这个:

&#13;
&#13;
  $("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.
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

试试这个:

$( 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/

答案 4 :(得分:0)

您可以使用: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>