JQuery порядок выбора поля с номерами - PullRequest
Новая
       6

JQuery порядок выбора поля с номерами

0 голосов
/ 01 февраля 2019

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

Это работает, когда на странице есть один блок выбора.: 

var selectList = jQuery('select option');
selectList.sort(function(a, b) {
      a = a.value;
      b = b.value;

    return a - b;
});
jQuery('select').html(selectList);

Итак, я попробовал это, но это совсем не работает: 

jQuery('select').each(function(i, obj) {
    var selectList = jQuery('select option');
    selectList.sort(function(a,b){
        a = a.value;
        b = b.value;

        return a-b;
    });
}).html(selectList);

HTML (но затем несколько из них с разными номерами): 

<select>
    <option value="">Selecteer</option>
    <option value="">1000</option>
    <option value="">43</option>
    <option value="">5356</option>
    <option value="">22</option>
    <option value="">6</option>
</select>

Что я делаю не так?и возможно ли, что он всегда ставит первый вариант в первую очередь?(поэтому он пропускает первую опцию выбора)

1 Ответ

0 голосов
/ 01 февраля 2019

Ваш целевой контент не значение , а текст .Поэтому вы должны использовать .text() вместо .value

Если у вас есть один элемент select, используйте 

$('select option').sort(function(a,b){
  return $(a).text()-$(b).text();
}).appendTo("select");


$('select option').sort(function(a,b){
  return $(a).text()-$(b).text();
}).appendTo("select");
$('select option:first-child').prop('selected', true);
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>

Но если у вас есть несколько вариантов выбора, используйте 

$('select').each(function(){
  $('option', this).sort(function(a,b){
    return $(a).text()-$(b).text();
  }).appendTo(this);
});


$('select').each(function(){
  $('option', this).sort(function(a,b){
    return $(a).text()-$(b).text();
  }).appendTo(this);
});
$('select option:first-child').prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>
<select>
  <option value="">Selecteer</option>
  <option value="">1000</option>
  <option value="">43</option>
  <option value="">5356</option>
  <option value="">22</option>
  <option value="">6</option>
</select>

Обратите внимание, что если вы хотите установить первый параметр как selected, используйте нижний код после сортировки 

$('select option:first-child').prop('selected', true);
...