I have a direct question: How to make "selected" an option of a select using FancySelect plugin?

This is the situation: I have a select with two options and two links. The links should be synchronized with the select. That means that when clicking on a link, it must make "selected" an option of the select.

It is important notice anyway that it is not a normal select, but i am using a JQuery plugin called FancySelect: / And this can be the main reason why normal solutions found elsewhere in StackOverflow did not apply to my specific case. So the point is not how to make "selected" an option of a select, but how to make it "selected" while using the FancySelect plugin.

Here you can understand better:

This is the code i am trying to use, but is not working yet:

$( "#a1" ).click(function() {

     $("#selector option:first").attr('selected','selected');
 });

Can you tell me please how can i force an option of a select to be "selected"? Thank you very much!

I have a direct question: How to make "selected" an option of a select using FancySelect plugin?

This is the situation: I have a select with two options and two links. The links should be synchronized with the select. That means that when clicking on a link, it must make "selected" an option of the select.

It is important notice anyway that it is not a normal select, but i am using a JQuery plugin called FancySelect: http://code.octopuscreative./fancyselect/ And this can be the main reason why normal solutions found elsewhere in StackOverflow did not apply to my specific case. So the point is not how to make "selected" an option of a select, but how to make it "selected" while using the FancySelect plugin.

Here you can understand better:

http://jsbin./AqoYucAG/11/edit

This is the code i am trying to use, but is not working yet:

$( "#a1" ).click(function() {

     $("#selector option:first").attr('selected','selected');
 });

Can you tell me please how can i force an option of a select to be "selected"? Thank you very much!

• javascript
• jquery
• jquery-plugins

• 1 For changing properties use prop method instead of the attr. – Ram Commented Dec 9, 2013 at 15:41
• 2 You are using some plugin try, $("#selector").val("1").trigger('change'); jsbin./AqoYucAG/12/edit – PSL Commented Dec 9, 2013 at 15:44
• 2 Yes, exactly - it's of great importance to this question that you're using something that's not just an ordinary <select> element. – Pointy Commented Dec 9, 2013 at 15:47
• @PSL Thank you very much! Please write it as an answer and i will check it. I have also edited the question adding the specification that in this case i was using the plugin called FancySelect – FrancescoMussi Commented Dec 9, 2013 at 15:51
• 1 hi here your jsbin corrected and working jsbin./AqoYucAG/21 – Aliceiw Commented Dec 9, 2013 at 16:00

2 Answers 2

It seems like you are using a select plugin. So generally they convert the underlying select to divs/spans etc to achieve good look and feel. And hence when you change the select option you need to notify the plugin saying that you have updated it. In this case it seems like you can trigger a change/update event to do so. You need to do the same thing (triggering an update) when you add options dynamically to the select as well, so that the plugin gets updated.

So try:

$( "#a1" ).click(function(e) {
   e.preventDefault();
   $("#selector").val("1").trigger('change');
});

According to the plugin code as shown below, it updates the text while change is triggered.

sel.on('change', function(e) {
    if (e.originalEvent && e.originalEvent.isTrusted) {
      return e.stopPropagation();
    } else {
      return updateTriggerText();
    }
  });

Easiest way, you don't need any option tag

 $("#selector").val("myVal");