JQuery_JavaScript___chosen.js操作实践

最新推荐文章于 2022-09-01 16:58:04 发布
最新推荐文章于 2022-09-01 16:58:04 发布
阅读量4.3k 收藏
点赞数 1
分类专栏： JavaScript 文章标签： jquery chosen select javascript 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohulunb/article/details/28424379
版权

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title>jquery.chosen.js_demo</title>
    <link rel="stylesheet" href="../../public_file/chosen_v1.1.0/chosen.css">
    <script type="text/javascript" src="../../public_file/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../public_file/chosen_v1.1.0/chosen.jquery.min.js"></script>
</head>
<style>
    body {
        font-family: "Helvetica Neue", Arial, Verdana, "Nimbus Sans L", sans-serif;
    }

    select {
        width: 300px;
    }

    hr {
        color: #ae81ff;
        width: 30%;
        margin-top: 20px;
    }
</style>

<body>

<div style="text-align: center;">

    <input type="button" id="chosen_s_1" value="标准下拉单选(1)_取值">
    <input type="button" id="chosen_s_2" value="标准下拉多选(2)_取值">
    <br>
    <input type="button" id="chosen_u_1" value="标准下拉单选(1)_添加option">
    <input type="button" id="chosen_u_2" value="标准下拉多选(2)_添加option">
    <br><br>
    标准下拉单选(1)<br><br>
    <select data-placeholder="请选择一个国家..." class="chosen-select 1" id="chosen-select-1">
        <option value=""></option>
        <option value="United States" selected>United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan" disabled>Afghanistan</option>
        <option value="Albania">Albania</option>
    </select>

    <hr>
    <br>
    标准下拉多选(2)<br><br>
    <select data-placeholder="请选择一个国家..." class="chosen-select 2" multiple id="chosen-select-2">
        <option value=""></option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
    </select>

    <hr>
    <br>
    分组单选(3)<br><br>
    <select data-placeholder="你最喜欢的足球队..." class="chosen-select 3" tabindex="5">
        <option value=""></option>
        <optgroup label="NFC EAST">
            <option>Dallas Cowboys</option>
            <option>New York Giants</option>
            <option>Philadelphia Eagles</option>
            <option>Washington Redskins</option>
        </optgroup>
        <optgroup label="NFC NORTH">
            <option>Chicago Bears</option>
            <option>Detroit Lions</option>
            <option>Green Bay Packers</option>
            <option>Minnesota Vikings</option>
        </optgroup>
        <optgroup label="NFC SOUTH">
            <option>Atlanta Falcons</option>
            <option>Carolina Panthers</option>
            <option>New Orleans Saints</option>
            <option>Tampa Bay Buccaneers</option>
        </optgroup>
        <optgroup label="NFC WEST">
            <option>Arizona Cardinals</option>
            <option>St. Louis Rams</option>
            <option>San Francisco 49ers</option>
            <option>Seattle Seahawks</option>
        </optgroup>
    </select>

    <hr>
    <br>
    分组多选(4)
    <br><br>
    <select data-placeholder="你最喜欢的足球队..." class="chosen-select 4" multiple
            tabindex="6">
        <option value=""></option>
        <optgroup label="NFC EAST">
            <option>Dallas Cowboys</option>
            <option>New York Giants</option>
            <option>Philadelphia Eagles</option>
            <option>Washington Redskins</option>
        </optgroup>
        <optgroup label="NFC NORTH">
            <option>Chicago Bears</option>
            <option>Detroit Lions</option>
            <option>Green Bay Packers</option>
            <option>Minnesota Vikings</option>
        </optgroup>
        <optgroup label="NFC SOUTH">
            <option>Atlanta Falcons</option>
            <option>Carolina Panthers</option>
            <option>New Orleans Saints</option>
            <option>Tampa Bay Buccaneers</option>
        </optgroup>
    </select>

    <br>
    <hr>
    <p>自动选中和移除不能选择的option(单选(5)、多选(6))</p>

    <select data-placeholder="Your Favorite Type of Bear" class="chosen-select 5"
            tabindex="7">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option selected>Sloth Bear</option>
        <option disabled>Sun Bear</option>
        <option>Polar Bear</option>
        <option disabled>Spectacled Bear</option>
    </select>
    <br><br>
    <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select 6"
            tabindex="8">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option selected>Sloth Bear</option>
        <option disabled>Sun Bear</option>
        <option selected>Polar Bear</option>
        <option disabled>Spectacled Bear</option>
    </select>
    <br>
    <hr>
    <p>如果有比较少的选项的时候 disable_search_threshold 可以在单选select中隐藏搜索输入框</p>
    <pre><code class="language-javascript">$(".chosen-select").chosen({disable_search_threshold: 10});</code></pre>
    <p></p>
    <br>
    <hr>
    <h2>复选框中option数量的限制</h2>

    <p>你可以很轻松的设置用户可以选多少个option:</p>
    <pre><code class="language-javascript">$(".chosen-select").chosen({max_selected_options: 5});</code></pre>
    <p> 如果你想选择另一个选项与限制选择:maxselected事件触发:</p>
    <pre><code class="language-javascript"> $(".chosen-select").bind("chosen:maxselected", function () { ... }); </code></pre>
    <br>
    <hr>

    <h2>允许取消单一的选择(7)</h2>

    <p>设置属性:allow_single_deselect: true</p>
    <select data-placeholder="Your Favorite Type of Bear" class="chosen-select-deselect 7"
            tabindex="12">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option selected>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
    </select>
    <hr>
    <h2>字体居右显示(8)</h2>

    <p>只需添加“chosen-rtl”到了“chosen-select”选择标签后</p>
    <select data-placeholder="Your Favorite Type of Bear" class="chosen-select  chosen-rtl 8"
            tabindex="12">
        <option value=""></option>
        <option>American Black Bear</option>
        <option>Asiatic Black Bear</option>
        <option>Brown Bear</option>
        <option>Giant Panda</option>
        <option selected>Sloth Bear</option>
        <option>Sun Bear</option>
        <option>Polar Bear</option>
        <option>Spectacled Bear</option>
    </select>

    <br>
    <hr>
    　　<h2>更改/更新事件</h2>
    　　<h3>表单字段的变化</h3>
    　　在进行表单操作时，你经常会遇到一些在某些选择项被选中，或选择项改变时，去触发某些操作的情况。
    <br>而在Chosen里，用户在任何时候选中一个选择项时，都会触发一个change事件。
    <br>你可以这样去写这个change操作：
    　　<br>
    　　$("#form_field").chosen().change( … );
    　　<h3>选择更新动态</h3>
    　　如果你需要去动态更新select选择框里的选择项，你需要通知Chosen去响应这个变动，
    <br>你需要在这个选项框是触发一个"liszt:updated"事件，
    <br>这样Chosen就会对更新过内容后的select选择框重新进行渲染。
    　　<br>
    　　$("#form_field").trigger("chosen:updated");
    　　<h3>自定义宽度支持</h3>
    　　使用自定义宽度与选择一样容易通过一个选择当您创建选择:
    　　<br>
    　　 $(".chosen-select").chosen({width: "95%"});

</div>
</body>
</html>

JS代码：

<script type="text/javascript">

    var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': {allow_single_deselect: true},//允许取消单一选择
        '.chosen-select-no-single': {disable_search_threshold: 10},//取消搜索框
        '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},//搜索结果为空时候提示信息
        '.chosen-select-width': {width: "95%"}//设置长度
    }


    $(function ($) {
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        // $(".chosen-select").chosen();
        //获取value
        $("#chosen_s_1").click(function () {
            alert($("#chosen-select-1").val());
        });
        $("#chosen_s_2").click(function () {
            alert($("#chosen-select-2").val());
        });

        $("#chosen_u_1").click(function () {
            $("#chosen-select-1").append("<option value='1'>add_option</option>");
            $("#chosen-select-1").trigger("chosen:updated");//修改demo结构后刷新下拉框
        });
        $("#chosen_u_2").click(function () {
            $("#chosen-select-2").append("<option value='1'>add_option</option>");
            $("#chosen-select-2").trigger("chosen:updated");
        });

    });
</script>

页面图片：


2.wa
关注
专栏目录
jquery-chosen.js插件
09-26
这个是jquery的下拉框插件,可以实现下拉框内模糊搜索的功能
chosen.jquery.min.js的使用（select下拉框支持首字母搜索）
一个很酷的人
08-25 3006
一、 文件引入 jquery必须引入,且需要在chosen.js之前  chosen.jquery.min.js //压缩版的chosen核心jquery代码  chosen.css //chosen 的样式文件 二 、代码示例 1 . html 代码 select class="chosen-select" data-placeholder="Choose a Coun
如何获取 chosen chosen.jquery.js 选中的值
INLICS的博客
11-09 1万+
作为一款高级表单插件，chosen.jquery.js应该获得了不少的使用者，但在使用上可能会碰到不少问题，一个很重要的问题就在chosen select的取值上。
chosen.js插件使用，回显，动态添加选项
Markix的博客
04-30 4660
官网：https://harvesthq.github.io/chosen/ 实例化 $(".chosen-select").chosen({disable_search_threshold: 10}); 赋值 var optValue = $(".chosen-select").val(); 回显 1.设置回显的值 $(".chosen-select").val(“opt1”); 2.触发cho...
利用chosen.js插件实现下拉可搜索多选，控制选择个数，选项框复位，修改下拉选项的功能（附代码）
cjFrontEnd的博客
11-03 6127
背景： 之前项目当中需要实现下拉多选功能，后来由于选项条数太大，超过1000多条，且选项为机器ip名，名字的相似程度太高，肉眼搜索进行选择用户体验实在太差，所以需要实现可搜索的下拉多选，后来在实际的项目当中有时有需要控制选项的个数，即实现可搜索的下拉单选，这些功能的实现觉得有必要稍微记录一下，供自己以后参考， 先记录如下。 一、使用该插件实现下拉多选非常简单： 1.下载该插件的相关文
有搜索的下拉框插件chosen.jquery.js
06-01
5. `js`：这是存放JavaScript文件的目录，很可能包含`chosen.jquery.js`插件的核心文件和其他辅助脚本。 总的来说，这个插件提供了一种简单高效的方法来增强网页下拉菜单的功能，使得用户在选择项时能够快速定位和...
带搜索的下拉框插件chosen.jquery.js
06-01
- **js**：这个目录很可能包含了插件的核心JavaScript文件，如`chosen.jquery.js`，以及可能的辅助脚本。 - **css**：这里是样式表文件，通常包含`chosen.css`，用于定义插件的视觉样式。 要使用这个插件，你需要在...
chosen.ajax:选择的简单 jQuery 插件，允许 ajax 搜索选项
06-07
选择的简单 jQuery 插件，允许 ajax 搜索选项 如何使用 第一步。 初始选择 $ ( '.elem' ) . chosen ( { ... } ) ; 第二步。 选择了初始化 ajax $ ( '.elem' ) . ajaxChosen ( { ... } ) ; 查看源代码中的可用...
chosen_v1.8.7.rar
03-05
在标题为"chosen_v1.8.7.rar"的压缩包中，包含了Chosen的1.8.7版本的相关文件，主要为"chosen1.8.7.css"和"chosen1.8.7.jquery.js"。这两个文件是实现Chosen功能的核心部分，它们将普通的下拉框转换为一个具有搜索...
HTML中chosen.js的小应用（含高度调试）
千山万水怎么能隔阻我对你的爱
06-22 2732
前言：最近world cup，一直在看比赛，每天3场比赛，我恨不得都看，可是还要上班，就只能看两场，从8点一直看到后半夜。所以本来想好好整理一下，写一点儿数据结构和算法的浅显分析与总结也一直没有写。前两天废了很多的精力在做一个下拉框，下了一个chosen.js的控件，还挺好用的，记录一下子用法。这个 chosen.js 是放在 GitHub 上的，有大手子可以上去给它好好改一改，因为有的功能还需完...
chosen.jquery.js美化以及实现模糊搜索
09-01
Chosen：select下拉选择框美化插件及实现模糊搜索，Chosen 是一个支持jQuery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。
chosen.jquery.js 插件的使用和总结
cheng1a的博客
09-01 6321
Chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！chosen插件下载及使用教程：https://harvesthq.github.io/chosen/chosen插件的选项介绍：https://harvesthq.github.io/chosen/options.htmlchosen插件css线上cdn引入： chosen插件
chosen.js
冰雪为融的博客
10-15 1652
/*! Chosen, a Select Box Enhancer for jQuery and Prototype by Patrick Filler for Harvest, http://getharvest.com Version 1.3.0 Full source at https://github.com/harvesthq/chosen Copyright (c) 2011-20...
改造jQuery.chosen.js，可进行远程搜索
qq_17613195的博客
06-03 760
由于项目需求，需要通过下拉框选择用户，而系统中的用户有1w多人，通过chosen插件生成下拉框的话，会导致页面卡顿
jquery插件chosen的使用
热门推荐
半路出家，立地为猿
06-24 1万+
一、 文件引入jquery //jquery必须,且需要在chosen.js之前 chosen.jquery.min.js //压缩版的chosen核心jquery代码 chosen.css //chosen 的样式文件二 、代码示例1 . html 代码<select class="chosen-select" data-placeholder="C
chosen插件的使用
tansy_big_rabbit的博客
12-06 740
Chosen 是一个支持jquery的select下拉框美化插件，还增加了自动筛选的功能。 如何使用chosen插件 1.chosen是jquery插件，所以一定要先引入jquery 顺序（chosen的css文件，jquery的js文件，chosen的js文件） 2.页面代码：写在select标签下！ 3.js代码 一些参数：
chosen.jquery.min.js 使用js手动更新选项
chuncui2576的博客
03-18 370
前端页面 select <select id="legendShow" name="options.legend.show" class="chosen" onchange="toggleElement(this, 'options_legend')"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值