Jquery Selectbox I梁问题

这是一个选择框（我已经使用并修改过）。当我点击选择框时，它会变成文本输入并显示工字梁。只是想禁用这个工字梁。我怎么能得到这个

以下是html：

<select name="Items" id="Items">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

选择1
选择2
选择3
选择4

和Jquery：

$(document).ready(function () {
    $('#Items').selectbox();
});

jQuery.fn.extend({
    selectbox: function (options) {
        return this.each(function () {
            new jQuery.SelectBox(this, options);
        });
    }
});


if (!window.console) {
    var console = {
        log: function (msg) {}
    }
}

jQuery.SelectBox = function (selectobj, options) {

    var opt = options || {};
    opt.inputClass = opt.inputClass || "selectbox";
    opt.containerClass = opt.containerClass || "selectbox-wrapper";
    opt.hoverClass = opt.hoverClass || "current";
    opt.currentClass = opt.selectedClass || "selected"
    opt.debug = opt.debug || false;

    var elm_id = selectobj.id;
    var active = -1;
    var inFocus = false;
    var hasfocus = 0;
    //jquery object for select element
    var $select = $(selectobj);
    // jquery container object
    var $container = setupContainer(opt);
    //jquery input object 
    var $input = setupInput(opt);
    // hide select and append newly created elements
    $select.hide().before($input).before($container);


    init();

    $input.click(function () {
        if (!inFocus) {
            $container.toggle();
        }
    })
        .focus(function () {
        if ($container.not(':visible')) {
            inFocus = true;
            $container.show();
        }
    })
        .keydown(function (event) {
        switch (event.keyCode) {
            case 38:
                // up
                event.preventDefault();
                moveSelect(-1);
                break;
            case 40:
                // down
                event.preventDefault();
                moveSelect(1);
                break;

            case 13:
                event.preventDefault();
                $('li.' + opt.hoverClass).trigger('click');
                break;
            case 27:
                hideMe();
                break;
        }
    })
        .blur(function () {
        if ($container.is(':visible') && hasfocus > 0) {
            if (opt.debug) console.log('container visible and has focus')
        } else {
            hideMe();
        }
    });


    function hideMe() {
        hasfocus = 0;
        $container.hide();
    }

    function init() {
        $container.append(getSelectOptions($input.attr('id'))).hide();
        var width = $input.css('width');
        $container.width(width);
    }

    function setupContainer(options) {
        var container = document.createElement("div");
        $container = $(container);
        $container.attr('id', elm_id + '_container');
        $container.addClass(options.containerClass);

        return $container;
    }

    function setupInput(options) {
        var input = document.createElement("input");
        var $input = $(input);
        $input.attr("id", elm_id + "_input");
        $input.attr("type", "text");
        $input.addClass(options.inputClass);
        $input.attr("autocomplete", "off");
        $input.attr("readonly", "readonly");
        $input.attr("tabIndex", $select.attr("tabindex"));

        return $input;
    }

    function moveSelect(step) {
        var lis = $("li", $container);
        if (!lis) return;

        active += step;

        if (active < 0) {
            active = 0;
        } else if (active >= lis.size()) {
            active = lis.size() - 1;
        }

        lis.removeClass(opt.hoverClass);

        $(lis[active]).addClass(opt.hoverClass);
    }

    function setCurrent() {
        var li = $("li." + opt.currentClass, $container).get(0);
        var ar = ('' + li.id).split('_');
        var el = ar[ar.length - 1];
        $select.val(el);
        $input.val($(li).html());
        return true;
    }

    function getCurrentSelected() {
        return $select.val();
    }

    function getCurrentValue() {
        return $input.val();
    }

    function getSelectOptions(parentid) {
        var select_options = new Array();
        var ul = document.createElement('ul');
        $select.children('option').each(function () {
            var li = document.createElement('li');
            li.setAttribute('id', parentid + '_' + $(this).val());
            li.innerHTML = $(this).html();
            if ($(this).is(':selected')) {
                $input.val($(this).html());
                $(li).addClass(opt.currentClass);
            }
            ul.appendChild(li);
            $(li)
                .mouseover(function (event) {
                hasfocus = 1;
                if (opt.debug) console.log('over on : ' + this.id);
                jQuery(event.target, $container).addClass(opt.hoverClass);
            })
                .mouseout(function (event) {
                hasfocus = -1;
                if (opt.debug) console.log('out on : ' + this.id);
                jQuery(event.target, $container).removeClass(opt.hoverClass);
            })
                .click(function (event) {
                var fl = $('li.' + opt.hoverClass, $container).get(0);
                if (opt.debug) console.log('click on :' + this.id);
                $('li.' + opt.currentClass).removeClass(opt.currentClass);
                $(this).addClass(opt.currentClass);
                setCurrent();
                hideMe();
            });
        });
        return ul;
    }

};

$（文档）.ready（函数（）{
$（“#项”）。选择框（）；
});
jQuery.fn.extend({
选择框：功能（选项）{
返回此。每个（函数（）{
新建jQuery.SelectBox（此选项）；
});
}
});
如果（！window.console）{
变量控制台={
日志：函数（msg）{}
}
}
jQuery.SelectBox=函数（selectobj，选项）{
var opt=options |{}；
opt.inputClass=opt.inputClass | |“选择框”；
opt.containerClass=opt.containerClass | |“选择包装盒”；
opt.hoverClass=opt.hoverClass | |“当前”；
opt.currentClass=opt.selectedClass | |“已选定”
opt.debug=opt.debug | | false；
var elm_id=selectobj.id；
var-active=-1；
var-inFocus=false；
var hasfocus=0；
//select元素的jquery对象
变量$select=$（selectobj）；
//jquery容器对象
var$container=setupContainer（opt）；
//jquery输入对象
var$input=设置输入（opt）；
//隐藏、选择和附加新创建的元素
$select.hide（）.before（$input）.before（$container）；
init（）；
$input。单击（函数（）{
如果（！inFocus）{
$container.toggle（）；
}
})
.focus（函数（）{
if（$container.not（':visible'））{
inFocus=true；
$container.show（）；
}
})
.keydown（功能（事件）{
开关（event.keyCode）{
案例38：
//向上
event.preventDefault（）；
移动选择（-1）；
打破
案例40：
//向下
event.preventDefault（）；
移动选择（1）；
打破
案例13：
event.preventDefault（）；
$（'li.+opt.hoverClass）.trigger（'click'）；
打破
案例27：
hideMe（）；
打破
}
})
.blur（函数（）{
if（$container.is（':visible'）&&hasfocus>0）{
if（opt.debug）console.log（'容器可见并具有焦点'）
}否则{
hideMe（）；
}
});
函数hideMe（）{
hasfocus=0；
$container.hide（）；
}
函数init（）{
$container.append（getSelectOptions（$input.attr（'id'））.hide（）；
var width=$input.css（'width'）；
$container.width（宽度）；
}
功能设置容器（选项）{
var container=document.createElement（“div”）；
$container=$（container）；
$container.attr（'id'，elm_id+'u container'）；
$container.addClass（options.containerClass）；
退回$container；
}
功能设置输入（选项）{
var输入=document.createElement（“输入”）；
变量$input=$（输入）；
$input.attr（“id”，elm_id+“_input”）；
$input.attr（“类型”、“文本”）；
$input.addClass（options.inputClass）；
$input.attr（“自动完成”、“关闭”）；
$input.attr（“只读”、“只读”）；
$input.attr（“tabIndex”），$select.attr（“tabIndex”）；
返回$input；
}
功能移动选择（步骤）{
var lis=$（“li”，$容器）；
如果（！lis）返回；
主动+=步进；
如果（激活<0）{
活动=0；
}else if（活动>=lis.size（））{
活动=lis.size（）-1；
}
lis.removeClass（opt.hoverClass）；
$（lis[active]）.addClass（opt.hoverClass）；
}
函数setCurrent（）{
var li=$（“li.+opt.currentClass，$container）.get（0）；
var ar=（''+li.id）.split（''）；
var el=ar[ar.length-1]；
$select.val（el）；
$input.val（$（li.html（））；
返回true；
}
函数getCurrentSelected（）{
返回$select.val（）；
}
函数getCurrentValue（）{
返回$input.val（）；
}
函数getSelectOptions（父ID）{
var select_options=new Array（）；
var ul=document.createElement（'ul'）；
$select.children（'option'）。每个（函数（）{
var li=document.createElement（'li'）；
li.setAttribute（'id'，parentid+'.'+$（this.val（））；
li.innerHTML=$（this.html（）；
如果（$（this）.is（':selected'））{
$input.val（$（this.html（））；
$（li）.addClass（opt.currentClass）；
}
ul.儿童（li）；
$（李）
.mouseover（函数（事件）{
hasfocus=1；
if（opt.debug）console.log（'over on:'+this.id）；
jQuery（event.target，$container）.addClass（opt.hoverClass）；
})
.mouseout（函数（事件）{
hasfocus=-1；
if（opt.debug）console.log（'out on:'+this.id）；
jQuery（event.target，$container）.removeClass（opt.hoverClass）；
})
。单击（功能（事件）{
var fl=$（'li.'+opt.hoverClass，$container）.get（0）；
if（opt.debug）console.log（'单击：'+此.id）；
$（'li.+opt.currentClass）.removeClass（opt.currentClass）；
$（this.addClass（opt.currentClass）；
setCurrent（）；
hideMe（）；
});
});
返回ul；
}
};

---

谢谢。

我想你是想用

存在“行”（又名文本框光标）的原因在于此函数：

function setupInput(options) {
    ...
    $input.attr("type", "text");
    ...
}

返回一个文本框

不完全确定您想要实现什么，但是由于插件文档不需要这样的功能，那么您应该尝试在不使用

的情况下实现它，可能只返回

和setti