Question

我需要更改下拉列表中的选项顺序

<select id="Genre" size="1">                  
        <option value="1">India</option>  
        <option value="2">US</option>  
        <option value="3">UK</option>  
        <option value="4">Africa</option>  
        <option value="5">Australia</option>  
        <option value="6">Newziland</option>    
</select>

使用javascript / jQuery我希望您将名为"Australia"的选项移动为第二个选项。现在是第二个选择。这意味着第一个选项India，第二个选项Australia，然后是其他选项。

我试过了$(#Genre>option[text=Australia].insertAfter('#Genre>option[value=1]')但是它不起作用..

Answer 1

试试这个：

$(document).ready(function() {
    $('#Genre>option[value=5]').insertAfter('#Genre>option[value=1]')
});

或者按内容获取：

$('#Genre>option:contains(Australia)').insertAfter('#Genre>option:contains(India)');

Answer 2

另一种变体：

$('#Genre option:eq(0)').after(function() {
    return $(this).parent().find('option:contains("Australia")');
});

Answer 3

尝试以下方法：

$("option[value=5]").insertAfter('option[value=1]');

如果您想更改该值，请添加以下内容：

$("option").each(function(index) {
      $(this).val(index+1)
});

演示：http://jsfiddle.net/Wrz4T/

Answer 4

如果您确切地知道自己想要什么，并且该移动是唯一的，您可以这样做：

$('#Genre option[value=5]').insertAfter($('#Genre option[value=1]'));

然后，将值更改为1,2,3,4,5（如果需要）

$('#Genre option').each(function(i){
   $(this).val(i);
})

Answer 5

尝试使用javascript解决方案：

var intCountry = '5';
var objSelect = document.getElementById('Genre');

//set initial node
var objInitialNode = objSelect.options[0];

//loop through options in select
for (var j = 0; j < objSelect.length; j++) {
    if (objSelect.options[j].value == intCountry ) {
        objSelect.insertBefore(objSelect.options[j], objInitialNode.nextSibling);
        break;
    }
}

根据文本更改下拉列表中的选项顺序

5 个答案: