jQuery：如何使用FancySelect插件强制“选择”选项？

Question

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.com/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.com/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!

Answer 1

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();
    }
  });

Answer 2

最简单的方法，您不需要任何选项标签

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