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

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

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

在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){
       }
   });
}

Answer 2

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

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

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

      });