jquery-chosen selection box plugin zero basic learning

Others 2022-04-23 06:59:08 views: 0

jquery-chosen select box plugin

First, foreword

Chosen is a drop-down box plugin under jquery. It can beautify the select box to make others look better and more convenient, and it also expands the function of filtering. It can group lists and also disable certain selections. The chosen plugin is easy to use. There are single selection and multiple selection, and can monitor events and render.
Official documents You can download the source code for research, where index.html is the homepage effect, and options.html is the configuration description.

Second, the need for storage documents

css file:

chosen.min.css

js file:

<script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>

The css files and js files can be found in the downloaded source code.
To use the choosen plug-in, you only need to import these key library files.

Third, a simple example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>测试下载选择框</title>
  <!--这个不是关键css文件,只是为了样式好看,使用chosen可不引入-->
  <link rel="stylesheet" href="docsupport/style.css">

  <!--需要引入的css-->
  <link rel="stylesheet" href="chosen.min.css">

</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <header>
          <h1>Chosen <small>(<span id="latest-version">v1.8.3</span>)</small></h1>
        </header>

        <h2><a name="standard-select" class="anchor" href="#standard-select">单选下拉框</a></h2>
      <div class="side-by-side clearfix">
        <div>
          <em>Into This</em>
          <select data-placeholder="Choose a Country..." class="my-chosen-select">
            <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>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antarctica">Antarctica</option>
            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
          </select>
        </div>
      </div>

  </div>
  </form>
  <script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>

  <script type="text/javascript">
      //初始化
      $(".my-chosen-select").chosen({disable_search:false, search_contains:true});
  </script>
</body>
</html>

The effect is as follows:
write picture description here

Explanation:
select is a component used by the choosen plugin, and the plugin will render others. The attribute class can be started at will, and the attribute data-placeholder is a dot.
In the script file: $(".my-chosen-select").chosen({disable_search:false, search_contains:true});use the configuration file to initialize the drop-down box. The chosen method is commonly used . The attributes disable_search:false, search_contains:true will be solved below.

A simple example came out like this, is it very easy, of course, the data is hard-coded, which is unscientific for program development. It also involves some other configurations and events, and data is dynamically added.

Fourth, the initialization method choosen configuration

I think the two configurations written above are sufficient in most cases, and of course there are other configurations. as follows:

  1. allow_single_deselect: The default value is false. When set to true, the non-required radio button will display the clear selected item icon
  2. disable_search : The default value is false, set to true to hide the search box of the radio button
  3. disable_search_threshold : default value 0, hide the search box when less than n items
  4. enable_split_word_search : the default value is true, whether to enable word segmentation search, it is enabled by default
  5. inherit_select_classes: The default value is false, whether to inherit the class of the select element. If set to true, Chosen will add the select class to the container
  6. max_selected_options: The default value of Infinity, the maximum number of selected items, the chosen:maxselected event will be triggered when the maximum limit is reached
  7. no_results_text: the default value of No results match, the text displayed when no matches are found
  8. placeholder_text_multiple : The default value Select Some Options, the placeholder text displayed when the multiple selection box is not selected
  9. placeholder_text_single: the default value Select an Option, the placeholder text displayed when the radio button is not selected
  10. search_contains: The default value is false, search contains items, the default matches from the first character
  11. single_backstroke_delete: The default value is true. Use the backspace key to delete the selected item in the multi-select box. If it is set to false, pressing delete/backspace for the first time will highlight the best selected item, and pressing it again will delete the item.
  12. width: the default is the same as the original select width
  13. display_disabled_options: The default value is true, whether to display disabled items
  14. display_selected_options: The default value is true, whether the multi-select box displays the selected items in the drop-down list

More options can be found under the downloaded source options.html .
The usage syntax is as follows:

$(".my-chosen-select").chosen({disable_search:false, search_contains:true, no_results_text:'暂时您查找的项目'});

Fifth, select component properties

The four key properties of components are as follows:

  1. data-placeholder: blank placeholder, display default value
  2. multiple: Multiple selection box attributes, such as<select data-placeholder="Choose a Country..." multiple class="my-chosen-select">...</select>
  3. selected: identifies the option "selected or not"
  4. , disabled: disable selection

The syntax is as follows:

 <select data-placeholder="Choose a Country..." class="my-chosen-select">
    <option value=""></option>
    <option value="United States" selected>选中</option>
    <option value="United Kingdom" disabled>禁止选中</option>
    <option value="Afghanistan">Afghanistan</option>
  </select>

The effect is as follows:
write picture description here

Sixth, class style

A style that reverses the text and the picture position of the drop-down box. The
syntax is as follows:

<select data-placeholder="Choose a Country..." class="my-chosen-select chosen-rtl">

7. Events and throwing events

chosen has a lot of events, and we can also actively trigger component events.
event:

//事件
$('.my-chosen-select').on('change', function(evt, params) {
    console.log("改变选择事件." + "选中值:" + $(".my-chosen-select option:selected").text());
 });
 $('.my-chosen-select').on('chosen:ready', function(evt, params) {
    console.log("chosen组件完全实例化后事件/好像不起作用");
 });
 $('.my-chosen-select').on('chosen:maxselected', function(evt, params) {
    console.log("组件是多选择框里,达到最大限度选择数量事件");
 });
 $('.my-chosen-select').on('chosen:showing_dropdown', function(evt, params) {
    console.log("打开下拉框事件");
 });
 $('.my-chosen-select').on('chosen:hiding_dropdown', function(evt, params) {
    console.log("收起下拉框事件");
 });
 $('.my-chosen-select').on('chosen:no_results', function(evt, params) {
    console.log("没有查找到匹配结果事件");
 });

To trigger events, Chosen's listener functions can be called by triggering a specific event on an element:

  1. chosen:updated: When the option changes, this event can be triggered actively, and chosen will re-render the select component.
  2. chosen:activate: Equivalent to HTML focus event
  3. chosen:open activates Chosen and displays search results
  4. chosen:close closes Chosen and hides search results

Eighth, take the value, initialize the selected item, data rendering

The above describes the configuration, properties, and events of choosen. Have you found any problems? Choosen rendering does not provide a data source alone, and then renders the drop-down box according to the data source. Therefore, only html can be used to dynamically change the data of the drop-down box. As follows:
1. Cover the entire drop-down box

$('.my-chosen-select').html('<option value=""></option><option value="United States">覆盖。新选项</option>');
//更新组件数据
$('.my-chosen-select').trigger("chosen:updated");

2. Additional options

//追加
$('.my-chosen-select').append('<option value=""></option><option value="United States">888</option>');
//更新组件数据
$('.my-chosen-select').trigger("chosen:updated");

So if you want to dynamically initialize data, you can only use the following methods:

//动态初始化数据
function initData(){
      var opitions = new Array({"value":1, label:"浙江"},{"value":2, label:"上海"},{"value":3, label:"江苏"},{"value":4, label:"北京"},{"value":5, label:"河北"},);
      var optionHtml = '<option value=""></option>';
      for(var i = 0;i < opitions.length;i++){
        var opition = opitions[i];
        optionHtml += '<option value="' + opition["value"] + '" >' + opition["label"] + '</option>';
      }
      $('.my-chosen-select').html(optionHtml);
      $('.my-chosen-select').trigger("chosen:updated");
}

The syntax to get the selected data is as follows:

$(".my-chosen-select option:selected")

Only the selected property can be manipulated for the selected item

Ninth, group display

To use grouped display, add optgrouptags to the html. as follows:

 <select data-placeholder="Choose a Country..."  class="my-chosen-select">
         <option value=""></option>
        <optgroup label="浙江">
            <option value="1">杭州</option>
            <option value="2">宁波</option>
        </optgroup>
        <optgroup label="江苏">
            <option value="3">苏州</option>
            <option value="4">扬州</option>
        </optgroup>
        <option value="5">上海</option>
</select>

The effect is as follows:
write picture description here

Tenth, multiple options

Use multipleattributes to turn single-selection into multiple-selection recommendations. as follows:

<select data-placeholder="Choose a Country..."  multiple class="my-chosen-select">
   <option value=""></option>
   <option value="United States" selected>选中</option>
   <option value="United Kingdom" disabled>禁止选中</option>
   <option value="Afghanistan">Afghanistan</option>
   <option value="Aland Islands">Aland Islands</option>
   <option value="Albania">Albania</option>
   <option value="Algeria">Algeria</option>
   <option value="American Samoa">American Samoa</option>
   <option value="Andorra">Andorra</option>
   <option value="Angola">Angola</option>
   <option value="Anguilla">Anguilla</option>
   <option value="Antarctica">Antarctica</option>
   <option value="Antigua and Barbuda">Antigua and Barbuda</option>
 </select>

The result is as follows:
write picture description here

Summarize

The whole choosen learning is completed,
1. Introduce the following 1 css and 2 js files
2. Correctly use the configuration to initialize the select component
3. The modification of the options can only be done by assembling the html method, and does not provide the operation of operating the update option of a separate data source.
4. Rich events. $('.my-chosen-select').trigger("chosen:updated");An event must be fired every time an option is modified .

The completed html source code is as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>测试下载选择框</title>
  <!--这个不是关键css文件,只是为了样式好看,使用chosen可不引入-->
  <link rel="stylesheet" href="docsupport/style.css">

  <!--需要引入的css-->
  <link rel="stylesheet" href="chosen.min.css">

</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <header>
          <h1>Chosen <small>(<span id="latest-version">v1.8.3</span>)</small></h1>
        </header>


        <h2><a name="standard-select" class="anchor" href="#standard-select">单选下拉框</a></h2>
      <div class="side-by-side clearfix">
        <div>
          <em>Into This</em>
          <select data-placeholder="Choose a Country..."  multiple class="my-chosen-select">
            <option value=""></option>
            <option value="United States" selected>选中</option>
            <option value="United Kingdom" disabled>禁止选中</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antarctica">Antarctica</option>
            <option value="Antigua and Barbuda">Antigua and Barbuda</option>
          </select>
        </div>
      </div> 
    <input type="button" onclick='updData();' value="更新数据"/>
  </div>
  </form>
  <script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>

  <script type="text/javascript">
      //初始化
      $(".my-chosen-select").chosen({disable_search:false, search_contains:true, no_results_text:'暂时您查找的项目'});

      //事件
      $('.my-chosen-select').on('change', function(evt, params) {
        console.log("改变选择事件." + "选中值:" + $(".my-chosen-select option:selected").text());

      });
      $('.my-chosen-select').on('chosen:ready', function(evt, params) {
        console.log("chosen组件完全实例化后事件/好像不起作用");
      });
      $('.my-chosen-select').on('chosen:maxselected', function(evt, params) {
        console.log("组件是多选择框里,达到最大限度选择数量事件");
      });
      $('.my-chosen-select').on('chosen:showing_dropdown', function(evt, params) {
        console.log("打开下拉框事件");
      });
      $('.my-chosen-select').on('chosen:hiding_dropdown', function(evt, params) {
        console.log("收起下拉框事件");
      });
      $('.my-chosen-select').on('chosen:no_results', function(evt, params) {
        console.log("没有查找到匹配结果事件");
      });


      //我们也可以主触发事件
      var opitions = new Array({"value":1, label:"浙江"},{"value":2, label:"上海"},{"value":3, label:"江苏"},{"value":4, label:"北京"},{"value":5, label:"河北"},);
      var optionHtml = '<option value=""></option>';
      for(var i = 0;i < opitions.length;i++){
        var opition = opitions[i];
        optionHtml += '<option value="' + opition["value"] + '" >' + opition["label"] + '</option>';
      }
      $('.my-chosen-select').html(optionHtml);
      $('.my-chosen-select').trigger("chosen:updated");

      function updData(){
        //覆盖
        $('.my-chosen-select').html('<option value=""></option><option value="United States">666</option>');
        //追加
        $('.my-chosen-select').append('<option value=""></option><option value="United States">888</option>');
        //更新组件数据
        $('.my-chosen-select').trigger("chosen:updated");
      }

  </script>
</body>
</html>

The library files required in the file are in the source code

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325521453&siteId=291194637
Recommended
微软回应中国区AI团队“打包赴美”传闻
Ranking
How to use ChatGPT to write 100,000+ hot articles for public accounts (includes prompt words)
sudo echo command execution Permission denied
ADO: Using Transactions to Operate Oracle Database
[Java] [Class and Object] equals, hashCode, clone methods
Linux virtual host function
Порт управления rabbitmq открыт
on,where
jQuery WeUI
How can there be a weed pilot in Hangzhou?
tcp / ip model four
Daily
More
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)

Code World

© 2018 codetd.com