Question

我有一个插件（https://github.com/olivM/jQuery-Selectbox），用于填充选择下拉列表并为下拉列表设置样式。

鉴于以下方法，我无法进行分离，通过我的代码中的偶数处理程序在下拉列表中附加元素修改。

我只能手动在firebug检查器中执行此操作。

$('#elem').selectbox('detach');
$('#elem').selectbox('attach');

我需要做什么来分离然后将选择框附加到html下拉列表？

Method      Description
attach  .selectbox("attach")    Attach the select box to a jQuery selection. This will hide the element and create its custom replacement.
change  .selectbox("change")    Change selected attribute of the selectbox.
close   .selectbox("close")     Close opened selectbox.
detach  .selectbox("detach")    Remove the selectbox functionality completely. This will return the element back to its pre-init state.
disable .selectbox("disable")   Disable the selectbox.
enable  .selectbox("enable")    Enable the selectbox.
open    .selectbox("open")  Call up attached selectbox.
option  .selectbox("option", options)   Get or set any selectbox option. If no value is specified, will act as a getter.

Answer 1

我的问题不在于代码没有执行，而是具有获取数据的异步性质。

添加超时解决了这个问题。

  setTimeout(function(){
              $('#elem').selectbox("detach");
              $('#elem').selectbox("attach");
              }, 10);

HTML脚本

 $(function () {
          $('#elem').selectbox("attach");
        });

获取下拉代码 - 驻留在角度控制器中

$http.get( 'some json resource').success(function(data){
            $scope.States = data;
             $scope.abbreviation = data[0].abbreviation;

            setTimeout(function(){ 
              $('#elem').val($scope.abbreviation);
              $('#elem').selectbox("detach");
              $('#elem').selectbox("attach");
            }, 10);

      });

Answer 2

我添加的对该库的最新修改随后解决了该问题。

在this._defaults中，我添加了3行（onBind，onInit，onDetach）

function Selectbox() {
        this._state = [];
        this._defaults = { // Global defaults for all the select box instances
            classHolder: "sbHolder",
            classHolderDisabled: "sbHolderDisabled",
            classSelector: "sbSelector",
            classOptions: "sbOptions",
            classGroup: "sbGroup",
            classSub: "sbSub",
            classDisabled: "sbDisabled",
            classToggleOpen: "sbToggleOpen",
            classToggle: "sbToggle",
            classFocus: "sbFocus",
            speed: 200,
            effect: "slide", // "slide" or "fade"
            onChange: null, //Define a callback function when the selectbox is changed
            onOpen: null, //Define a callback function when the selectbox is open
            onClose: null, //Define a callback function when the selectbox is closed

            onBind: null,
            onInit: null,
            onDetach: null
        };
}

在+

中添加了行

+      self._initSelectBox(target);
       sbSelector.appendTo(sbHolder);
       sbOptions.appendTo(sbHolder);
       sbHolder.insertAfter($target);

       $("html").on('mousedown', function(e){
                e.stopPropagation();
                $("select").selectbox('close');
       });
       $([".", inst.settings.classHolder, ", ,", inst.settings.classSelector].join("")).mousedown(function(e){
                e.stopPropagation;
       });
+      self._bindSelectbox(target);

在_detachSelectbox内添加了以下内容

var onDetach = this._get(inst, 'onDetach');
if (onDetach != null)
{
     onDetach.apply({inst.input ? inst.input[0]: null), [inst]);
}

正上方

$("#sbHolder_" + inst.uid).remove();
$.data(target, PROP_NAME, null);
$(target).show();

然后我添加了初始化和绑定方法

 _initSelectbox: funciton (target){
    var onInit, inst = this._getInst(target);
    if (inst) {
       onInit = this._get(inst, 'onInit');
       if (onInit != null)
       {
         onInit.apply({inst.input ? inst.input[0]: null), [inst]);
       }
    }
 }
  _bindSelectbox: funciton (target){
    var onBind, inst = this._getInst(target);
    if (inst) {
       onBind = this._get(inst, 'onBind');
       if (onBind != null)
       {
         onBind.apply({inst.input ? inst.input[0]: null), [inst]);
       }
    }
 }

调用代码（AngularJS）

function bindDrodown(selector)
{
    angular.forEach($(".selector").function(elem){
       //set span value to selected value of dropdown
       id = $(elem).attr("id");
       itemid = $("#"+id).data("itemid");
       setDrowDownValue(elem);
       setSpanValue(itemid);
    });

   $(selector).selectbox({
       onInit: function (inst){
       },
       onBind: function (inst){
       },
       onChange: function (id, inst){
           //change code here     
       },
       onDetach: function(inst){
       }
   });
}

如何将表格中的多个文本单元格同时转换为样式下拉列表？

2 个答案: