当前位置： 文江博客话题详情

jquery 在 keydown/up 中选择 li 值

发布于 2024-10-15 16:35:09 字数 471 浏览 2 评论 0原文 

<input type="text" id="region" class="inputs" name="remo">

<ul id="ulList">
<li id="idr0"></li>
<li id="idr1">Baltimore</li>
<li id="idr2">India</li>
<li id="idr3">International - Russia</li>
<li id="idr4">MD 19940</li>
<li id="idr5">Minnesota</li>
<li id="idr6">North Carolina</li>
</ul>

当选择 keydown/up 然后用 li 值设置输入值时，我需要 jquery 代码

原文 
<input type="text" id="region" class="inputs" name="remo">

<ul id="ulList">
<li id="idr0"></li>
<li id="idr1">Baltimore</li>
<li id="idr2">India</li>
<li id="idr3">International - Russia</li>
<li id="idr4">MD 19940</li>
<li id="idr5">Minnesota</li>
<li id="idr6">North Carolina</li>
</ul>

i need jquery code for when select keydown/up then set the input value with li value

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

断爱 2024-10-22 16:35:09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#region').live('keypress', function (e) {
                var objCurrentLi, obj = $('#ulList').find('.SelectedLi'), objUl = $('#ulList'), code = (e.keyCode ? e.keyCode : e.which);

                if (code === 40) {  //Up Arrow
                    if ((obj.length === 0) || (objUl.find('li:last').hasClass('SelectedLi') === true)) {
                        objCurrentLi = objUl.find('li:first').addClass('SelectedLi');
                    }
                    else {
                        objCurrentLi = obj.next().addClass('SelectedLi');
                    }
                    obj.removeClass('SelectedLi');
                }
                else if (code === 38) {  //Down Arrow
                    if ((obj.length === 0) || (objUl.find('li:first').hasClass('SelectedLi') === true)) {
                        objCurrentLi = objUl.find('li:last').addClass('SelectedLi');
                    }
                    else {
                        objCurrentLi = obj.prev().addClass('SelectedLi');
                    }
                    obj.removeClass('SelectedLi');
                }

                $(this).val(objCurrentLi.text());
            });
        });
    </script>
</head>
<body>
    <input type="text" id="region" class="inputs" name="remo" />
    <ul id="ulList">
        <li id="idr0"></li>
        <li id="idr1">Baltimore</li>
        <li id="idr2">India</li>
        <li id="idr3">International - Russia</li>
        <li id="idr4">MD 19940</li>
        <li id="idr5">Minnesota</li>
        <li id="idr6">North Carolina</li>
    </ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#region').live('keypress', function (e) {
                var objCurrentLi, obj = $('#ulList').find('.SelectedLi'), objUl = $('#ulList'), code = (e.keyCode ? e.keyCode : e.which);

                if (code === 40) {  //Up Arrow
                    if ((obj.length === 0) || (objUl.find('li:last').hasClass('SelectedLi') === true)) {
                        objCurrentLi = objUl.find('li:first').addClass('SelectedLi');
                    }
                    else {
                        objCurrentLi = obj.next().addClass('SelectedLi');
                    }
                    obj.removeClass('SelectedLi');
                }
                else if (code === 38) {  //Down Arrow
                    if ((obj.length === 0) || (objUl.find('li:first').hasClass('SelectedLi') === true)) {
                        objCurrentLi = objUl.find('li:last').addClass('SelectedLi');
                    }
                    else {
                        objCurrentLi = obj.prev().addClass('SelectedLi');
                    }
                    obj.removeClass('SelectedLi');
                }

                $(this).val(objCurrentLi.text());
            });
        });
    </script>
</head>
<body>
    <input type="text" id="region" class="inputs" name="remo" />
    <ul id="ulList">
        <li id="idr0"></li>
        <li id="idr1">Baltimore</li>
        <li id="idr2">India</li>
        <li id="idr3">International - Russia</li>
        <li id="idr4">MD 19940</li>
        <li id="idr5">Minnesota</li>
        <li id="idr6">North Carolina</li>
    </ul>
</body>
</html>
回复 原文
~没有更多了~

关于作者

嗼ふ静

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文