能输入的select下拉框

最新推荐文章于 2024-07-15 14:59:04 发布

keeleylee

最新推荐文章于 2024-07-15 14:59:04 发布

阅读量1.6k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sunlilan/article/details/52600383

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div style="position:relative;">
        <span style="margin-left:100px;width:22px;overflow:hidden;">
            <select id="myselect" style="width:342px;margin-left:-100px">
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
        </span>
        <input id="mybox" title="" value="" type="text"
             style="width:320px;position:absolute;left:0px;">
        </input>
</div>

<script type="text/javascript">
$('#myselect').change(function(){
        //some codes
        var text=($("#myselect").children('option:selected').text()).replace(/(^\s*)|(\s*$)/g,"");
        //取到下拉框被选中的值并去掉左右空格

        $('#mybox').val(text);
        $('#mybox').attr("title",$("#myselect").val());
        //将input的值设为下拉框的值
});

//直接在input框中输入后点击回车
$('#mybox').keypress(function(event){
        var c = $(this).val();
        if(event.keyCode == '13')   //判断是否为回车事件
        {
            $("#myselect").val(c);  //保持下拉框与input框的值一致
            alert('您输入的内容是：' + c);
            //some codes
        }
});
function addOption(){
        $("#myselect").append('<option value="" selected="selected">全部</option>');
        var text=($("#myselect").children('option:selected').text()).replace(/(^\s*)|(\s*$)/g,"");
        $('#mybox').val(text);
        $('#mybox').attr("title",$("#myselect").val());
}
$(document).ready(function() {
    addOption();
}
</script>