3

I am basicly trying to take a specific option from select and move it at the top of the list. What I am trying to do now is this.

$("select[name=list]").find('option[value="car"]').insertBefore($("select[name=list]").find('option:eq(1)'));

and for some reason it executes twice leaving two options at the top

<option value="car">Car</option>
<option value="car">Car</option>

Not sure what am I doing wrong, maybe someone knows?

thank you.

devjs11
  • 1,728
  • 6
  • 35
  • 69

4 Answers4

12

From the jQuery Documentation:

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved before the target (not cloned) and a new set consisting of the inserted element is returned.

[..]

If there is more than one target element, however, cloned copies of the inserted element will be created for each target after the first, and that new set (the original element plus clones) is returned.

So, there is a clue! My guess is that your selector, is too much embracing, and you are selecting more than one element... Even in another select list in the document.

You may provide a little more HTML code for your example, but let me show how I would do it...

Html

<select id='MyNiceList'>
 <option value='my_option_1'>First Option</option>
 <option value='my_option_2'>Second Option</option>
 <option value='my_option_3'>Third Option</option>
</select>

Js

$('#MyNiceList option[value="my_option_2"]').insertBefore('#MyNiceList option[value="my_option_1"]');

If you pay attention on the selector that I used, I eliminate any possibility of select more than one element, so, the rule on the second part I quoted is obeyed.

Example:

http://jsfiddle.net/sASCg/1/

I hope I helped you on my first Answer! : )

Vitox
  • 2,208
  • 16
  • 17
5

There may be 2 problems

  1. If you insert a new option, then you simply may have 2 options with the same values, as you did not remove it.

  2. The first item is numbered "0" not "1"

http://jsfiddle.net/4kHuA/

  var $el = $("select[name=list]").find('option[value="car"]');
  $("select[name=list]").find('option[value="car"]').remove();
  $("select[name=list]").find('option:eq(0)').before($el);
Asped
  • 2,993
  • 3
  • 28
  • 51
  • I would not use the $ in front of a variable name unless I'd write PHP or something... – Alexis Wilke Mar 11 '14 at 16:18
  • 2
    In the past I wouldn not either, but in jQuery context people use it, when the variable contains a jQuery object http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign?lq=1 – Asped Mar 12 '14 at 09:52
  • Very interesting, thank you for the link. That would make sense. – Alexis Wilke Mar 13 '14 at 07:26
  • This solution will append the newly added option on the top of the select list, but won't mark/show it as currently selected option. to do so, you could try to add these lines: `var all_options = $("select[name=list]").html();` `$("select[name=list]").html("");` `$("select[name=list]").html(all_options);` – Tariqul Islam Jan 11 '20 at 08:53
0

:eq(1) will select the second element rather than the first element. Other than that, the code you've posted should work fine:

var $select = $("#mySelect");
$mySelect.find('option[value="car"]')
         .insertBefore($mySelect.find('option:eq(1)'));

http://jsfiddle.net/B5W4B/

Doug
  • 3,262
  • 1
  • 22
  • 30
0

try this

$("select[name=list]").find('option[value="car"]').prependTo($("select[name=list]"));
$("select[name=list]").val('car')
JpBaena13
  • 76
  • 3