首页 > 软件开发 > JQUERY >

jquery.combobox组合框的用法

来源:互联网 2023-03-16 23:53:53 453

html默认的下拉框select遇到数据多时,不容易选择查找,本文介绍jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

工具/原料

  • 计算机
  • 浏览器

方法/步骤

  • 1

    默认的select用法yj0办公区 - 实用经验教程分享!

    select>yj0办公区 - 实用经验教程分享!

    option value="0">请选择分类/option> yj0办公区 - 实用经验教程分享!

    option value="1">美食/option> yj0办公区 - 实用经验教程分享!

    option value="2">游戏/option> yj0办公区 - 实用经验教程分享!

    /select>yj0办公区 - 实用经验教程分享!

  • 2

    jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

    如图yj0办公区 - 实用经验教程分享!

    jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

  • 3

    引入js,css,如图yj0办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css" href="css/jquery.combobox.css"; ?>yj0办公区 - 实用经验教程分享!

    script src="js/jquery-1.7.2.js">/script>yj0办公区 - 实用经验教程分享!

    script src="js/jquery.combobox.js">/script>yj0办公区 - 实用经验教程分享!

    jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

  • 4

    html写法,如图yj0办公区 - 实用经验教程分享!

    div id="obj_member">yj0办公区 - 实用经验教程分享!

    input id="combo_member" class="combo_click" type="text" placeholder="--请输入信息--" value="" />yj0办公区 - 实用经验教程分享!

    input id="member_id_h" name="member_id" type="hidden" value="" />yj0办公区 - 实用经验教程分享!

    /div>yj0办公区 - 实用经验教程分享!

    jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

  • 5

    js的写法yj0办公区 - 实用经验教程分享!

    script>yj0办公区 - 实用经验教程分享!

    var array_member = '[{"id":"1","name":"aa"},{"id":"2","name":"re"}]';yj0办公区 - 实用经验教程分享!

    $('#combo_member').combobox(array_member, "", 'obj_member', 'member_id_h', false, '', 0, false, 10);yj0办公区 - 实用经验教程分享!

  • 6

    页面效果yj0办公区 - 实用经验教程分享!

    jquery.combobox组合框的用法yj0办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!yj0办公区 - 实用经验教程分享!


    标签: JQUERYHTMLJAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码