<select class="basic">

  <option value="">Select something…</option>

  <option>Lorem</option>

  <option>Ipsum</option>

  <option>Dolor</option>

  <option>Sit</option>

  <option>Amet</option>

</select>

JAVASCRIPT

復(fù)制代碼代碼如下:

$('.basic').fancySelect();

更新options

如果你的下拉框的 options 在插件初始化后被修改了，你可以通過在下拉框上觸發(fā) update.fs 方法來告訴插件更新options列表。

復(fù)制代碼代碼如下:

var mySelect = $('.my-select');

mySelect.fancySelect();

mySelect.append('');

mySelect.trigger('update.fs');

啟用/禁用下拉框

FancySelect 下拉框插件會在初始化后自動將下拉框設(shè)置為 disabled 禁用狀態(tài)。如果你需要重新設(shè)置下拉框的狀態(tài)，可以在 select 元素上使用 enable.fs 或 disable.fs 方法來修改它們。

復(fù)制代碼代碼如下:

<select class="my-select" disabled>

    <option>First Option</option>

    <option>Second Option</option>

</select>

var mySelect = $('.my-select');

mySelect.fancySelect(); // currently disabled because of html property

// later…

mySelect.trigger('enable.fs'); // now enabled

// even later…

mySelect.trigger('disable.fs'); // now disabled again

如果你需要制作一些個性效果，可以使用 triggerTemplate 和 triggerTemplate 方法，它們都是通過 option 選項來返回一個HTML字符串：

復(fù)制代碼代碼如下:

<select class="bulbs">

    <option data-icon="old">Incandescent</option>

    <option data-icon="curly">CFL</option>

    <option data-icon="work">Halogen</option>

</select>

$('.bulbs').fancySelect({

    optionTemplate: function(optionEl) {

        return optionEl.text() + '

'; } })

你可以在 <select> 下拉框框選項改變的時候監(jiān)聽 change.fs 事件：

復(fù)制代碼代碼如下:

<select class="my-select" disabled>

    <option>First Option</option>

    <option>Second Option</option>

</select>

var mySelect = $('.my-select');

mySelect.fancySelect().on('change.fs', function() {

    $(this).trigger('change.$');

}); // trigger the DOM's change event when changing FancySelect

您可能感興趣的文章: