choicesjs标签输入30种场景用法示例代码
代码语言:html
所属分类:表单美化
代码描述:choicesjs标签输入30种场景用法示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/choices.base.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/choices.9.0.1.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/choices.9.0.1.js"></script> </head> <body> <div class="container"> <div class="section"> <h2>Text inputs</h2> <label for="choices-text-remove-button">Limited to 5 values with remove button</label > <input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something" /> <label for="choices-text-unique-values" >Unique values only, no pasting</label > <input class="form-control" id="choices-text-unique-values" type="text" value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class" /> <label for="choices-text-email-filter">Email addresses only</label> <input class="form-control" id="choices-text-email-filter" type="text" placeholder="This is a placeholder" /> <label for="choices-text-disabled">Disabled</label> <input class="form-control" id="choices-text-disabled" type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder" /> <label for="choices-text-prepend-append-value">Prepends and appends a value to each items return value</label > <input class="form-control" id="choices-text-prepend-append-value" type="text" value="preset-1, preset-2" placeholder="This is a placeholder" /> <label for="choices-text-preset-values" >Preset values passed through options</label > <input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder" /> <label for="choices-text-i18n">I18N labels</label> <input class="form-control" id="choices-text-i18n" type="text" /> <label for="choices-text-rtl">Right-to-left</label> <input data-trigger class="form-control" id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl" /> <hr /> <h2>Multiple select input</h2> <label for="choices-multiple-default">Default</label> <select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder" multiple> <option value="Choice 1" selected>Choice 1</option> <option value="Choice 2">Choice 2</option> <option value="Choice 3">Choice 3</option> <option value="Choice 4" disabled>Choice 4</option> </select> <label for="choices-multiple-remove-button">With remove button</label> <select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder" multiple> <option value="Choice 1" selected>Choice 1</option> <option value="Choice 2">Choice 2</option> <option value="Choice 3">Choice 3</option> <option value="Choice 4">Choice 4</option> </select> <label for="choices-multiple-groups">Option groups</label> <select class="form-control" name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder" multiple> <option value="">Choose a city</option> <optgroup label="UK"> <option value="London">London</option> <option value="Manchester">Manchester</option> <option value="Liverpool">Liverpool</option> </optgroup> <optgroup label="FR"> <option value="Paris">Paris</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> </optgroup> <optgroup label="DE" disabled> <option value="Hamburg">Hamburg</option> <option value="Munich">Munich</option> <option value="Berlin">Berlin</option> </optgroup> <optgroup label="US"> <option value="New York">New York</option> <option value="Washington" disabled>Washington</option> <option value="Michigan">Michigan</option> </optgroup> <optgroup label="SP"> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Malaga">Malaga</option> </optgroup> <optgroup label="CA"> <option value="Montreal">Montreal</option> <option value="Toronto">Toronto</option> <option value="Vancouver">Vancouver</option> </optgroup> </select> <p> <small>If the following example do not load, the Discogs rate limit has probably been reached. Try again later!</small > </p> <label for="choices-multiple-remote-fetch" >Options from remote source (Fetch API) & limited to 5</label > <select class="form-control" name="choices-multiple-remote-fetch" id="choices-multiple-remote-fetch" multiple ></select> <label for="choices-multiple-rtl">Right-to-left</label> <select class="form-control" data-trigger name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder" multiple dir="rtl" > <option value="Choice 1" selected>Choice 1</option> <option value="Choice 2">Choice 2</option> <option value="Choice 3">Choice 3</option> <option value="Choice 4" disabled>Choice 4</option> </select> <label for="choices-multiple-labels" >Use label in event (add/remove)</label > <p id="message"></p> <select id="choices-multiple-labels" multiple></select> <hr /> <h2>Single select input</h2> <label for="choices-single-default">Default</label> <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder" > <option value="">This is a placeholder</option> <option value="Choice 1">Choice 1</option> <option value="Choice 2">Choice 2</option> <option value="Choice 3">Choice 3</option> </select> <p> <small >If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!</small > </p> <label for="choices-single-remote-fetch" >Options from remote source (Fetch API)</label > <select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch" > <option value="">Pick an Arctic Monkeys' record</option> </select> <label for="choices-single-remove-xhr" >Options from remote source (Fetch API) & remove button</label > <select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr" > <option value="">Pick a Smiths' record</option> </select> <label for="choices-single-groups">Option groups</label> <select class="form-control" data-trigger name="choices-single-groups" id="choices-single-groups" > <option value="">Choose a city</option> <optgroup label="UK"> <option value="London">London</option> <option value="Manchester">Manchester</option> <option value="Liverpool">Liverpool</option> </optgroup> <optgroup label="FR"> <option value="Paris">Paris</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> </optgroup> <optgroup label="DE" disabled> <option value="Hamburg">Hamburg</option> <option value="Munich">Munich</option> <option value="Berlin">Berlin</option> </optgroup> <optgroup label="US"> <option value="New York">New York</option> <option value="Washington" disabled>Washington</option> <option value="Michigan">Michigan</option> </optgroup> <optgroup label="SP"> <option value="Madrid">Madrid</option> <option value="Barcelona">Barcelona</option> <option value="Malaga">Malaga</option> </optgroup> <optgroup label="CA"> <option value="Montreal">Montreal</option> <option value="Toronto">Toronto</option> <option value="Vancouver">Vancouver</option> </optgroup> </select> <label for="choices-single-rtl">Right-to-left</label> <select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" dir="rtl" > <option value="Choice 1">Choice 1</option> <option value="Choice 2">Choice 2</option> <option value="Choice 3">Choice 3</option> </select> <label for="choices-single-no-search" >Options added via config with no search</label > <select class="form-control" name="choices-single-no-search" id="choices-single-no-search" > <option value="0">Zero</option> </select> <label for="choices-single-preset-options" >Option and option groups added via config</label > <select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options" ></select> <label for="choices-single-selected-option" >Option selected via config with custom properties</label > <p> <small>Try searching for 'fantastic', "Label 3" should display</small> </p> <select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option"></select> <label for="choices-with-custom-props-via-html">Option searchable by custom properties via <code>data-custom-properties</code> attribute</label > <p> <small>Try searching for 'fantastic', "Label 3" should display</small> </p> <select class="form-control" id="choices-with-custom-props-via-html"> <option value="Dropdown item 1">Label One</option> <option value="Dropdown item 2" selected disabled>Label Two</option> <option value="Dropdown item 3" data-custom-properties="This option is fantastic" >Label Three</option > </select> <label for="choices-single-no-sorting">Options without sorting</label> <select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting"> <option value="Madrid">Madrid</option> <option value="Toronto">Toronto</option> <option value="Vancouver">Vancouver</option> <option value="London">London</option> <option value="Manchester">Manchester</option> <option value="Liverpool">Liverpool</option> <option value="Paris">Paris</option> <option value="Malaga">Malaga</option> <option value="Washington" disabled>Washington</option> <option value="Lyon">Lyon</option> <option value="Marseille">Marseille</option> <option value="Hamburg">Hamburg</option> <option value="Munich">Munich</option> <option value="Barcelona">Barcelona</option> <option value="Berlin">Berlin</option> <option value="Montreal">Montreal</option> <option value="New York">New York</option> <option value="Michigan">Michigan</option> </select> <label for="choices-single-custom-templates">Custom templates</label> <select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates"> <option value="React">React</option> <option value="Angular">Angular</option> <option value="Ember">Ember</option> <option value="Vue">Vue</option> </select> <p> Below is an example of how you could have two select inputs depend on eachother. 'Tube stations' will only be enabled if the value of 'Cities' is 'London' </p> <label for="cities">Cities</label> <select class="form-control" name="cities" id="cities"> <option value="">Choose a city</option> <option value="Leeds">Leeds</option> <option value="Manchester">Manchester</option> <option value="London">London</option> <option value="Sheffield">Sheffield</option> <option value="Newcastle">Newcastle</opti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0