Monday, May 19, 2014

SelectBoxIt Change Text When Option Value Is Not Unique

Big thanks to my colleague, I resolved the error in SelectBoxIt.

This problem happened when option value is not unique, and it did not display the correct text after we select the option. The following is how i work it:

First, set option attribute to selected when we make change of the option.

$('#member_profession').change( function() {
      var selectedOption = $('#member_profession option:selected').text();
      $("#member_profession").find('option').removeAttr("selected");
      $("#member_profession option").filter(function(index) { return $(this).text() === selectedOption; }).attr('selected', 'selected');
  });

Then, we have to bind changed event to selectbox:

  $('#member_profession').bind({
    "changed" : function(ev,obj) {
      var selectedOption = $('#member_profession option:selected').text();
      var selectBox = $("#member_profession").data("selectBox-selectBoxIt");
      selectBox._setText(selectBox.dropdownText, selectedOption);
    }
  });

Taaadaaa.. Hope it is helpful and also good for future reference too. ^^

References Link:
http://gregfranko.com/jquery.selectBoxIt.js/#OptionsAPI

No comments:

Post a Comment