根據文本更改下拉列表中選項的順序

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;
    }
}