Jquery dropdown, want one value always top when page loads

Question

When the page loads i want to sort the dropdown using the jquery, to show the BI option first in the dropdown. I am generating the dropdown from the database.

            <select id="conversionPixels" name="conversionPixels" >
                    <option value="10">PA3G ABTestConversion1DayWindow</option> 
                    <option value="11">activ Conversion</option>            
                    <option value="12">Proactiv Plus 24 Hour View</option>  
                    <option value="13">Proactiv Plus Conversion</option>    
                    <option value="0">BI</option>   
            </select>

I have used below jquery, it is not working

             $("#conversionPixel").each(function() {

                // Keep track of the selected option.
                var selectedValue = $(this).val();

                // Sort all the options by text. I could easily sort these by val.
                $(this).html($("option", $(this)).sort(function(a, b) {
                    if( a.text=='BI'){
                        return -1;
                    }
                     if( b.text=='BI'){
                         return 1;
                    }
                    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
                }));

                // Select one option.
                $(this).val(selectedValue);
            });

Hi John, i dont want sorting, but i want the BI text always on top relarless of other values. — user3157090, Oct 06 '14 at 07:36

score 0 · Answer 1 · answered Oct 06 '14 at 08:08

0

So why not to do something like

When you get data from database make sure BI is first Use code like

select id,name 
from friends 
order by id=5 desc, id asc

And then just use foreach to create options for your select - BI will be first

answered Oct 06 '14 at 08:08

konik

173
1
2
8

score 0 · Answer 2 · answered Oct 06 '14 at 08:23

0

Use this code snippet:

  $("#conversionPixels > option").each(function() {
           if(this.text == "BI"){
                 $(this).remove();
                 $("#conversionPixels").prepend($(this));
           }
   });

answered Oct 06 '14 at 08:23

Satya Ranjan Sahoo

1,086
7
24

JME · Answer 3 · 2014-10-06T08:30:34.587

If I understood your question correctly, all you want is the <option value="0">BI</option> element to be first on the select. Try runing the code snippet below.

$("#conversionPixels").children().each(function(index, elem) {
  var $elem = $(elem);
  if ($elem.val() === "0") {
    $elem.remove();
    $("#conversionPixels").prepend($elem);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="conversionPixels" name="conversionPixels">
  <option value="10">PA3G ABTestConversion1DayWindow</option>
  <option value="11">activ Conversion</option>
  <option value="12">Proactiv Plus 24 Hour View</option>
  <option value="13">Proactiv Plus Conversion</option>
  <option value="0">BI</option>
</select>

score 0 · Answer 4 · answered Oct 06 '14 at 08:24

This works if the select option text value you want to change is always BI.

//copy values BI
var html = $('select option').filter(function () { return $(this).html() == "BI"; }).html(),
value = $('select option').filter(function () { return $(this).html() == "BI"; }).val();

//remove option BI
$('select option').filter(function () { return $(this).html() == "BI"; }).remove();


//add to start copied value BI            
$('select').prepend("<option selected value ='"+value+"'>"+html+"</option>");

Jquery dropdown, want one value always top when page loads

4 Answers4