{"id":2808,"date":"2023-03-09T09:49:01","date_gmt":"2023-03-09T01:49:01","guid":{"rendered":"http:\/\/www.iooe.cn\/?p=2808"},"modified":"2023-03-09T09:52:28","modified_gmt":"2023-03-09T01:52:28","slug":"weui-select%e5%8a%9f%e8%83%bd%e6%b7%bb%e5%8a%a0%e6%90%9c%e7%b4%a2%e5%8a%9f%e8%83%bd%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"https:\/\/www.iooe.cn\/index.php\/2023\/03\/09\/weui-select%e5%8a%9f%e8%83%bd%e6%b7%bb%e5%8a%a0%e6%90%9c%e7%b4%a2%e5%8a%9f%e8%83%bd%e9%97%ae%e9%a2%98\/","title":{"rendered":"weui select\u529f\u80fd\u6dfb\u52a0\u641c\u7d22\u529f\u80fd\u95ee\u9898"},"content":{"rendered":"\n
  1. \u6309\u7f51\u4e0a\u7684\u6559\u7a0b
    1. https:\/\/blog.csdn.net\/cjnba\/article\/details\/120939084<\/li>
    2. https:\/\/jqweui.edik.cn\/extends#select<\/li><\/ol><\/li><\/ol>\n\n\n\n

      \u53ef\u80fd\u5b9e\u73b0\uff0c \u95ee\u9898\u662f\u641c\u7d22\u5b8c\u6210\u540e \uff0c \u4e0d\u4f1a\u66f4\u65b0input\u6846\u7684\u503c<\/p>\n\n\n\n

      2. \u6ce8\u610f\u7684\u4fee\u6539\u7684\u51e0\u4e2a\u5730\u65b9\uff0c\u6211\u6765\u6307\u51fa\u6765<\/p>\n\n\n\n

        Select.prototype.initConfig = function() {\n    this.config = $.extend({}, defaults, this.config);\n\n    var config = this.config;\n\n    if(!config.items || !config.items.length) return;\n\n    config.items = config.items.map(function(d, i) {\n      if(typeof d == typeof \"a\") {\n        return {\n          title: d,\n          value: d\n        };\n      }\n\n      return d;\n    });\n\n    \/\/this.tpl = $.t7.compile(\"<div class='weui-picker-modal weui-select-modal'>\" + config.toolbarTemplate + (config.multi ? config.checkboxTemplate : config.radioTemplate) + \"<\/div>\");\n\tthis.tpl = $.t7.compile(\"<div app_gn='select' style='min-height:300px !important;' class='weui-picker-modal weui-select-modal'>\" + config.toolbarTemplate + (config.search ? config.searchTemplate : \"\") + (config.multi ? config.checkboxTemplate : config.radioTemplate) + \"<\/div>\");\n        <\/strong>\n    if(config.input !== undefined) this.$input.val(config.input);\n\n    this.parseInitValue();\n\n    this._init = true;\n  }<\/code><\/pre>\n\n\n\n
      \u52a0\u7c97\u7684\u4e00\u6bb5<\/p>\n\n\n\n
        defaults = $.fn.select.prototype.defaults = {\n    items: [],\n    input: undefined, \/\/\u8f93\u5165\u6846\u7684\u521d\u59cb\u503c\n    title: \"\u8bf7\u9009\u62e9\",\n    multi: false,\n    closeText: \"\u786e\u5b9a\",\n    autoClose: true, \/\/\u662f\u5426\u9009\u62e9\u5b8c\u6210\u540e\u81ea\u52a8\u5173\u95ed\uff0c\u53ea\u6709\u5355\u9009\u6a21\u5f0f\u4e0b\u624d\u6709\u6548\n    onChange: undefined, \/\/function\n    beforeClose: undefined, \/\/ function \u5173\u95ed\u4e4b\u524d\uff0c\u5982\u679c\u8fd4\u56defalse\u5219\u963b\u6b62\u5173\u95ed\n    onClose: undefined, \/\/function\n    onOpen: undefined, \/\/function\n    split: \",\",  \/\/\u591a\u9009\u6a21\u5f0f\u4e0b\u7684\u5206\u9694\u7b26\n    min: undefined, \/\/\u591a\u9009\u6a21\u5f0f\u4e0b\u53ef\u7528\uff0c\u6700\u5c11\u9009\u62e9\u6570\n    max: undefined, \/\/\u5355\u9009\u6a21\u5f0f\u4e0b\u53ef\u7528\uff0c\u6700\u591a\u9009\u62e9\u6570\n    search: false,\/\/\u641c\u7d22\uff0c\u9ed8\u8ba4 \u4e0d\u5f00\u542f\n    readOnly: true,\/\/\u53ea\u8bfb<\/strong><\/code><\/pre>\n\n\n\n
      \u4e0a\u9762\u52a0\u7c97\u7684\u4e00\u6bb5<\/p>\n\n\n\n
          \n\/\/\u5728toolbarTemplate\u53d8\u91cf\u4e0a\u9762\u52a0\u5982\u4e0b\uff1a\n    searchTemplate: '<div class=\"weui-search-bar\">\\\n            <form class=\"weui-search-bar__form\">\\\n            <div class=\"weui-search-bar__box\">\\\n            <i class=\"weui-icon-search\"><\/i>\\\n            <input type=\"search\" class=\"weui-search-bar__input\" id=\"select_search_input\" placeholder=\"\u641c\u7d22\" required=\"\">\\\n            <a href=\"javascript:\" class=\"weui-icon-clear\" id=\"select_search_clear\"><\/a>\\\n            <\/div>\\\n            <label class=\"weui-search-bar__label\">\\\n            <i class=\"weui-icon-search\"><\/i>\\\n            <span>\u641c\u7d22<\/span>\\\n            <\/label>\\\n            <\/form>\\\n            <a href=\"javascript:\" class=\"weui-search-bar__cancel-btn\" id=\"select_search_cancel\">\u53d6\u6d88<\/a>\\\n            <\/div>',<\/strong><\/code><\/pre>\n\n\n\n
       searchTemplate \u8fd9\u4e2a\u53d8\u91cf\u5bf9\u5e94\u7684\u4ee3\u7801<\/p>\n\n\n\n
          toolbarTemplate: '<div class=\"toolbar\">\\\n      <div class=\"toolbar-inner\">\\\n      <a href=\"javascript:;\" class=\"picker-button close-select\">{{closeText}}<\/a>\\\n      <h1 class=\"title\">{{title}}<\/h1>\\\n      <\/div>\\\n      <\/div>',\n    searchTemplate: '<div class=\"weui-search-bar\">\\\n            <form class=\"weui-search-bar__form\">\\\n            <div class=\"weui-search-bar__box\">\\\n            <i class=\"weui-icon-search\"><\/i>\\\n            <input type=\"search\" class=\"weui-search-bar__input\" id=\"select_search_input\" placeholder=\"\u641c\u7d22\" required=\"\">\\\n            <a href=\"javascript:\" class=\"weui-icon-clear\" id=\"select_search_clear\"><\/a>\\\n            <\/div>\\\n            <label class=\"weui-search-bar__label\">\\\n            <i class=\"weui-icon-search\"><\/i>\\\n            <span>\u641c\u7d22<\/span>\\\n            <\/label>\\\n            <\/form>\\\n            <a href=\"javascript:\" class=\"weui-search-bar__cancel-btn\" id=\"select_search_cancel\">\u53d6\u6d88<\/a>\\\n            <\/div>',<\/strong>\n    radioTemplate:\n      '<div app_gn=\"cells\"<\/strong> class=\"weui-cells weui-cells_radio\">\\\n        {{#items}}\\\n        <label app_gn=\"cell\"<\/span> <\/strong>class=\"weui-cell weui-check_label\" for=\"weui-select-id-{{this.title}}\">\\\n          <div class=\"weui-cell__bd weui-cell_primary\">\\\n            <p>{{this.title}}<\/p>\\\n          <\/div>\\\n          <div class=\"weui-cell__ft\">\\\n            <input type=\"radio\" class=\"weui-check\" name=\"weui-select\" id=\"weui-select-id-{{this.title}}\" value=\"{{this.value}}\" {{#if this.checked}}checked=\"checked\"{{\/if}} data-title=\"{{this.title}}\">\\\n            <span class=\"weui-icon-checked\"><\/span>\\\n          <\/div>\\\n        <\/label>\\\n        {{\/items}}\\\n      <\/div>',\n    checkboxTemplate:\n      '<div app_gn=\"cells\" <\/span><\/strong>class=\"weui-cells weui-cells_checkbox\">\\\n        {{#items}}\\\n        <label app_gn=\"cell\"<\/strong> class=\"weui-cell weui-check_label\" for=\"weui-select-id-{{this.title}}\">\\\n          <div class=\"weui-cell__bd weui-cell_primary\">\\\n            <p>{{this.title}}<\/p>\\\n          <\/div>\\\n          <div class=\"weui-cell__ft\">\\\n            <input type=\"checkbox\" class=\"weui-check\" name=\"weui-select\" id=\"weui-select-id-{{this.title}}\" value=\"{{this.value}}\" {{#if this.checked}}checked=\"checked\"{{\/if}} data-title=\"{{this.title}}\" >\\\n            <span class=\"weui-icon-checked\"><\/span>\\\n          <\/div>\\\n        <\/label>\\\n        {{\/items}}\\\n      <\/div>',<\/code><\/pre>\n\n\n\n
      \u6ce8\u610f\u6a21\u677f\u4e2d\u7684\u6dfb\u52a0\u4e86\u4e00\u4e9b\u6807\u7b7e\u5c5e\u6027\u3002\u52a0\u7c97\u3002<\/p>\n\n\n\n
        Select.prototype._bind = function(dialog) {\n    var self = this,\n        config = this.config;\n    dialog.on(\"change\", function(e) {\n      var checked = dialog.find(\"input:checked\");\n      var values = checked.map(function() {\n        return $(this).val();\n      });\n      var titles = checked.map(function() {\n        return $(this).data(\"title\");\n      });\n      \n      self.updateInputValue(values, titles);\t\n\t  console.log(config.multi,':eagle');\n\t\n      if(config.autoClose && !config.multi){ \n\t      \/\/ eagle\u8fd9\u91cc\u4e0d\u5ef6\u8fdf\u7684\u8bdd\u4f1a\u9020\u6210\u641c\u7d22\u529f\u80fd\u9009\u4e2d\u5931\u6548\n          setTimeout(function () { self.close(); }, 100); \n      }<\/strong>\n    })\n    .on(\"click\", \".close-select\", function() {\n      self.close();\n    });\n  }<\/code><\/pre>\n\n\n\n
      \u4e0a\u9762\u8fd9\u6bb5\u91cc\u9762\u6211\u52a0\u4e86\u4e00\u4e2a\u5ef6\u8fdf\uff0c \u5426\u4fa7\u4f1a\u51fa\u73b0\uff0c \u67e5\u627e\u540e\uff0c \u518d\u70b9\u51fb\u9009\u4e2d\u7684\u884c\u65f6\uff0c\u4e0d\u80fd\u66f4\u65b0\u5230input\u6846\u91cc\u9762\u7684\u503c\u3002 \u5176\u5b83\u65b9\u6cd5\u6211\u4e5f\u4e0d\u4f1a\uff0c \u6709\u66f4\u597d\u65b9\u6cd5\u7684\u4eba\u53ef\u4ee5\u6765\u8865\u51b2\u3002\u539f\u56e0\u5c31\u662f\u5728\u641c\u7d22\u5b8c\u540e\u518d\u70b9\u51fb\u9009\u4e2d\u4f1a\u5173\u4e86\u6ca1\u6709 radio\u9690\u6389\u7684input\u6846\u6ca1\u6709\u89e6\u53d1\u3002 <\/p>\n\n\n\n
      \u6a21\u677f\u4f7f\u7528\u4f8b\uff1a<\/p>\n\n\n\n
      <div class=\"weui-cell weui-cell_select weui-cell_select-after\">\n    <div class=\"weui-cell__hd\">\n       <label class=\"weui-label\">\u65bd\u5de5\u4f4d\u7f6e<\/label>\n    <\/div>\n    <div class=\"weui-cell__bd\">\n      <input class=\"weui-input search_test\" name=\"shigongweizhi\"  type=\"text\" value=\"\" >\n    <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
      javasript\u90e8\u4efd\uff1a<\/p>\n\n\n\n
      \/\/ \u7ed9 \u641c\u7d22\u6846\u6dfb\u52a0\u8f93\u76d1\u542c\u4e8b\u4ef6 \u8fd9\u91cc\u7167\u6284\u4e0d\u7528\u52a8\n$(document).on('input', \"#select_search_input\", function () {\n   select_search_weui(this);\n}).on('click', '#select_search_clear,#select_search_cancel', function () {\n   select_search_weui(this);\n});\n\n\/\/\u8fd9\u91cc\u662f\u8c03\u7528\u65b9\u6cd5\nfunction select_search_weui(obj) {\n    var _body = $(obj).closest(\"div[app_gn='select']\");\n    var search_val = $(obj).val().trim();\n    \/\/console.log('search_val:' + search_val);\n    var cells = $(_body).find(\"label[app_gn='cell']\");\n    \/\/console.log('cells:' + cells.length);\n    for (var i = 0, len = cells.length; i < len; i++) {\n        var text = $(cells[i]).text().trim();\n        if (text.indexOf(search_val) > -1) {\n            $(cells[i]).css(\"display\", \"\");\n        } else {\n            $(cells[i]).css(\"display\", \"none\");\n        }\n    }\n}\n$(\".search_test\").select({\n  title: \"\u8bf7\u9009\u62e9\",\n  autoClose: true, \n  search: true,\/\/\u641c\u7d22\uff0c\u9ed8\u8ba4 \u4e0d\u5f00\u542f\n  items: [\"\u6cd5\u5b98\", \"\u533b\u751f\", \"\u730e\u4eba\", \"\u5b66\u751f\", \"\u8bb0\u8005\", \"\u5176\u4ed6\",\"22\u6cd5\u5b98222\", \"33\u730e\u4eba1\",  \"\u5b66\u751f1\", \"44\u8bb0\u80051\", \"\u5176\u4ed61\" ],\n  onChange: function (d) {\n\t console.log(\"selected:\",d);\n\t\/\/vm.CurrentUserId = d.values;\n\t\/\/vm.CurrentUserName = d.titles;\n\t\n\t\/\/$.toptip('this is select');\n  },\n  beforeClose:function(d){\n\t  console.log(\"beforeClose:\",d);\n  }\n});\n \n\/\/\u8fd9\u4e2a\u662f\u5173\u8054\u524d\u53f0\u5217\u65b0\uff0c \u52a8\u6001\u66f4\u65b0\u4e0b\u62c9\u5217\u8868\u5185\u5bb9\u7684\uff0c \u53c2\u8003\n$(\"select[name='yewufenlei']\").change(function(){\n\tconsole.log($(this).val());\n\t$.toptip('\u8bf7\u8f93\u5165\u8fdb\u5ea6\u4fe1\u606f');\n\t$(\".search_test\").select(\"update\", { items: [\"\u6cd5\u5b981\", \"\u730e\u4eba1\",  \"\u5b66\u751f1\", \"\u8bb0\u80051\", \"\u5176\u4ed61\" ] })\n});<\/code><\/pre>\n\n\n\n
      \u6280\u672f\u80fd\u529b\u6709\u9650\uff0c \u5206\u4eab\u51fa\u6765\u53c2\u8003\uff0c \u8f6c\u8f7d\u8bf7\u6ce8\u660e\u5c0f\u7ad9\u5730\u5740,\u539f\u521b\u6587\u7ae0\uff0cwww.iooe.cn<\/p>\n\n\n\n
      \n
      weui select\u529f\u80fd\u6dfb\u52a0\u641c\u7d22\u529f\u80fd\u95ee\u9898<\/a><\/blockquote>