Выпадающий список заказов по тексту

Question

Мне нужно заказать этот выбор по алфавиту (уже работа) и по количеству имен.

Это пример моего select:

<select id="test" name="test"> 
    <option value="a">a - 10 names</option> 
    <option value="b">b - 17 names</option> 
    <option value="c">c - 4 names</option> 
</select> 

Уит этот код является правильным в алфавитном порядке.

<script> 
$(document).ready(function() { 
    $('#btnSort').click(function(e) { 
    $("#test").html($('#test option').sort(function(x, y) { 
     return $(x).text() < $(y).text() ? -1 : 1; 
    })) 
    $("#test").get(0).selectedIndex = 0; 
    e.preventDefault(); 
    }); 
}); 
</script> 

Но как я могу заказать его в соответствии с количеством имен?

Пример:

<select id="test" name="test"> 
    <option value="c">c - 4 names</option> 
    <option value="a">a - 10 names</option> 
    <option value="b">b - 17 names</option> 
</select> 

У меня попробовать этот JQuery код, но не работает:

<script> 
$(document).ready(function() { 
    $('#btnSort').click(function(e) { 
    $("#test").html($('#test option').sort(function(x, y) { 
     return $(x).text().split(' - ') < $(y).text().split(' - ') ? -1 : 1; 
    })) 
    $("#test").get(0).selectedIndex = 0; 
    e.preventDefault(); 
    }); 
}); 
</script> 

Благодаря всем

Answer 1

Когда вы разбиваете строка как:

c - 4 names 

с помощью:

$(x).text().split(' - ') 

вы получите массив с двумя значениями:

• гр
• 4 названия

Если вы хотите использовать эту стратегию, вы должны рассмотреть:

• использование x.textContent вместо $ (х) .text()
• получить второй элемент массива
• синтаксического анализа это значение

Пример:

$(document).ready(function() { 
 
    $('#btnSort').on('click', function(e) { 
 
    $("#test option").sort(function(x, y) { 
 
     var iX = parseInt(x.textContent.split(' - ')[1]); 
 
     var iY = parseInt(y.textContent.split(' - ')[1]); 
 
     return (isNaN(iX) ? 0 : iX) - (isNaN(iY) ? 0 : iY); 
 
    }).appendTo('#test'); 
 
    $('#test').prop('selectedIndex', 0); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button" id="btnSort">Sort</button> 
 
<select id="test" name="test"> 
 
    <option value="b">b - 17 names</option> 
 
    <option value="c">c - 4 names</option> 
 
    <option value="a">a - 10 names</option> 
 
</select>

Answer 2

Если у вас есть только один номер внутри опции, этот вид будет работать на вас:

<script> 
$(document).ready(function() { 
    $('#btnSort').click(function(e) { 
    $("#test").html($('#test option').sort(function(x, y) { 
     return parseInt($(x).text().match(/\d+/g)[0]) < parseInt($(y).text().match(/\d+/g)[0]) ? -1 : 1; 
    })) 
    $("#test").get(0).selectedIndex = 0; 
    e.preventDefault(); 
    }); 
}); 
</script> 

Answer 3

Вы можете использовать регулярное выражение, чтобы найти число из строки и сравнить их с короткими, как показано ниже.

$('#btnSort').click(function(e) { 
 
    $("#test").html($('#test option').sort(function(x, y) { 
 
      var numX = $(x).text().match(/\d/g).join(''), 
 
       numY = $(y).text().match(/\d/g).join(''); 
 
      
 
      return numX - numY; 
 
    })); 
 
    
 
    $("#test option").first().prop('selected', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="test" name="test"> 
 
    <option value="b">b - 17 names</option> 
 
    <option value="c">c - 4 names</option> 
 
    <option value="a">a - 10 names</option> 
 
</select> 
 

 
<button id="btnSort">Sort</button>

Answer 4

Вы должны сначала захватить число из опций текста, а затем нужно сравнить его следующим образом:

$(document).ready(function() { 
 
    //get the number out of the option text 
 
    function getNumber(text){ 
 
    var arr = text.split(' - '); 
 
    var lastPart = arr[1]; 
 
    var numberPart = lastPart.replace(" names",""); 
 
    return parseInt(numberPart); 
 
    } 
 
    
 
    $('#btnSort').click(function(e) { 
 
    $("#test").html($('#test option').sort(function(x, y) { 
 
     return getNumber($(x).text()) < getNumber($(y).text()) ? -1 : 1; 
 
    })) 
 
    $("#test").get(0).selectedIndex = 0; 
 
    e.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="test" name="test"> 
 
    <option value="c">e - 14 names</option> 
 
    <option value="a">a - 10 names</option> 
 
    <option value="c">c - 4 names</option> 
 
    <option value="b">b - 17 names</option> 
 
</select> 
 
<button id="btnSort">Sort</button>