3

配送オプションと価格のリストを動的に表示する選択ボックスがあります。安いものから高いものまで並べてほしいです。

html の例を次に示します。

<select name="ShippingMethod">
  <option value="ups:1">UPS Next Day Air ($30.08)</option>
  <option value="ups:4">UPS 2nd Day Air ($14.77)</option>
  <option value="ups:6">UPS 3 Day Select ($10.93)</option>
  <option value="ups:7">UPS Ground ($8.00)</option>
  <option value="flatzonc:Pick up in store">Pick up in store ($0.00)</option>
  <option value="mvusps:PRIORITY">U.S.P.S. Priority Mail&reg; ($7.45)</option>
</select>

これで値を配列に入れる方法を知っています：

shippingOptions = [];
$('select[name=ShippingMethod] option').each(function() {
    myList.push($(this).html())
});

しかし、それは私が得た限りです。それを使用してそれらを並べ替え、順番に再挿入する方法がわかりません。私はJavaScriptが初めてなので、助けていただければ幸いです。

ありがとう

4

4 に答える 4

3

まず、各オプションの金額を抽出し、それらを並べ替えて既存のドロップダウンを置き換える必要があります。完全なコードは次のとおりです。

http://jsfiddle.net/amyamy86/L8qgX/

// Get the price in the option
    var getPrice = function (str) {
        var price = 0;
        var result = str.match(/[0-9]+(.)[0-9]{2}/);    //regex matches >1 digit followed by . decimal, followed by 2 digits
        if (result.length > 0) {
            price = parseFloat(result[0]);
        }
        return price;
    };

// Sort the prices
    var sortPrices = function (priceList) {
        priceList.sort(function (a, b) {
            return a.price > b.price; // > is sort ascending order
        });
        return priceList;
    };

var prices = [];
// Get the option's label, value, price
    $('select[name=ShippingMethod] option').each(function () {
        var option = $(this);
        var price = getPrice(option.text());
        prices.push({
            label: option.html(),
            value: option.val(),
            price: price
        });
    });

var shippingOptions = sortPrices(prices);

// create output HTML
var output = '';
for (var i = 0; i < shippingOptions.length; i++) {
    output += '<option value="' + shippingOptions[i].value + '">' + shippingOptions[i].label + '</option>';
}

// replace <select> with sorted options
$('select[name="ShippingMethod"]').html(output);

使用方法の詳細については、次を参照してください。

于 2013-03-21T19:25:28.343 に答える
3

http://jsfiddle.net/hPZ3F/17

// get all options
var shippingOptions = $('select[name=ShippingMethod] option');

// initialize sort
shippingOptions.sort(function(a,b) {
    // define regex that pulls contents of parens
    var patt = /\((.*)\)/;

    // for each element in sort, find the price and remove the dollar sign
    a.price = a.text.match(patt)[1].replace('\$', '');
    b.price = b.text.match(patt)[1].replace('\$', '');

    return a.price - b.price;
});

// update the select with the new option order
$('select[name=ShippingMethod]').append(shippingOptions);

// select the first option
$(shippingOptions[0]).attr("selected", "");
于 2013-03-21T19:07:04.560 に答える
2

まあ、すでに回答済みですが、これを書いていたので、とにかく投稿します。残りのすべてのものがほとんどミックスされています、笑..ファンシー

$('select[name=ShippingMethod]').
    html($('select[name=ShippingMethod] option').
         clone().sort(function (a, b) {
            a = a.innerHTML, b = b.innerHTML;
            return parseFloat(
                    a.substr(a.indexOf('$') + 1)
                ) >= parseFloat(
                    b.substr(b.indexOf('$') + 1)
                );
        })
    );

http://jsfiddle.net/6zbzK/

編集：コメントを確認した後、これはより効率的ですが、より詳細な回答です：

var selectOpts = $('select[name="ShippingMethod"] option');
var len = selectOpts.length;
var options = new Array(len), out = "", i;
selectOpts.each(function (index) {
    var self = $(this);
    var txt = self.text();
    options.push({
        'html': '<option value="' + self.val() + '">' + txt + '</option>',
        'price': parseFloat(txt.substr(txt.indexOf('$') + 1))
    });
    // Return if not last item
    if (index !== len - 1) {
        return;
    }
    // Sort options and set 'out'
    options.sort(function (a, b) {
        return a.price > b.price;
    });
    for (i = 0; i < len; i += 1) {
        out += options[i].html;
    };
}).parent('select').html(out);

http://jsfiddle.net/QnHFH/

于 2013-03-21T19:36:16.903 に答える
1

これを試してください..ここで並べ替えは値に基づいて行われます...textテキストに基づいて並べ替えるのに使用できます

$("select").html($("select option").sort(function (a, b) {
     return a.text == b.text ? 0 : a.value < b.value ? -1 : 1  ;
}));

デモ

テキストで並べ替え： デモ2

 return a.text == b.text ? 0 : a.text < b.text ? -1 : 1 ;

テキスト内の中括弧内の値で並べ替える：デモ3

$("select").html($("select option").sort(function (a, b) {
    var a1 =  parseFloat(a.text.match(/\(.*?([\d.]+).*?\)/)[1].replace("$",""));
    var b1 =  parseFloat(b.text.match(/\(.*?([\d.]+).*?\)/)[1].replace("$",""));
    return a.text == b.text ? 0 : a1 < b1 ? -1 : 1
}));
于 2013-03-21T18:50:05.563 に答える