how to find the maximum length of an option using jquery

Question

I have a select with options, its a transformed select not the normal one.

<select>
<option value="0">apple</option>
<option value="1">orange</option>
<option value="2">bannan fruit</option>
</select>

How to find the maximum length in the options(bannan fruit) using Jquery?

@Simon Yes the string of bannana fruit which is the biggest text in options... — Harry, Dec 14 '11 at 13:43

Dogbert · Accepted Answer · 2011-12-14T14:09:13.303

6

var max_length = -1;
$('option').each(function(){
  max_length = Math.max(max_length, $(this).text().length);
});
alert(max_length);

edited Dec 14 '11 at 14:09

answered Dec 14 '11 at 13:41

Dogbert

212,659
41
396
397

2

Just need to change `.val()` to `.text()`. – jabclab Dec 14 '11 at 13:48
@Dogbert I tried of using max_length = Math.max(max_length, $(this).width()); It worked in FF, but in IE the width remains 0... – Harry Dec 14 '11 at 14:29

score 2 · Answer 2 · edited May 23 '17 at 11:44

Mandatory one-liner solution:

Math.max.apply(null, $('option').map(function() { return $(this).html().length; }).toArray())

I'd say that Dogbert's solution is probably more readable, but there might still be some fun lessons in here. What's going on:

using .map to get a result set of just the lengths
using .toArray to make an actual array out of the result set, which would be required by .apply
Passing the array to Math.max using apply which will make the second argument the arguments collection, i.e. equivalent of writing Math.max(5, 6, 12);

If you're using Roatin Marth's excellent array extensions, the code would look a bit neater:

Array.prototype.max = function() {
  return Math.max.apply(null, this)
}

$('option').map(function() { return $(this).html().length; }).toArray().max();

+1 mandatory up-vote for adequate language feature usage. (`.toArray()` is *correct*, but superfluous, sind the jQuery object actually *is* an array - and I guess it should be `.text()` instead of `.html()`) — Tomalak, Dec 14 '11 at 14:16

robert petranovic · Answer 3 · 2011-12-14T14:24:24.243

You can prototype jQuery object like this:

jQuery.prototype.select_longest = function () { 
    var res = ""; 
    $(this).children().each(function () {
        if ($(this).html().length > res.length) 
            res = $(this).html(); 
    }); 
    return res;        // use this line if you want biggest string
    return res.length; // use this line if you want length of biggest string
}

Then you can use it like this:

var longest = $("#id").select_longest();

how to find the maximum length of an option using jquery

3 Answers3