Created
December 11, 2019 11:00
-
-
Save SachinBahukhandi/159efb09951c6d47051429aff53703fb to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/gakutab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <!-- Include base CSS (optional) --> | |
| <!-- <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/base.min.css" | |
| /> --> | |
| <!-- Include Choices CSS --> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" | |
| /> | |
| </head> | |
| <body> | |
| <h1>Hello, world!</h1> | |
| <form> | |
| <select id="tag"></select> | |
| </form> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
| <!-- Include Choices JavaScript (latest) --> | |
| <!-- Or versioned --> | |
| <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script> | |
| <script id="jsbin-javascript"> | |
| const element = document.querySelector('#tag'); | |
| const choices = new Choices(element,{ | |
| silent: false, | |
| items: [{ | |
| value: 'Value 1', | |
| label: 'Label 1', | |
| id: 1 | |
| }, | |
| { | |
| value: 'Value 2', | |
| label: 'Label 2', | |
| id: 2, | |
| customProperties: { | |
| random: 'I am a custom property' | |
| } | |
| }], | |
| choices:[{ | |
| value: 'Option 1', | |
| label: 'Option 1', | |
| selected: true, | |
| disabled: false, | |
| }, | |
| { | |
| value: 'Option 2', | |
| label: 'Option 2', | |
| selected: false, | |
| disabled: false, | |
| customProperties: { | |
| description: 'Custom description about Option 2', | |
| random: 'Another random custom property' | |
| }, | |
| }] | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const element = document.querySelector('#tag'); | |
| const choices = new Choices(element,{ | |
| silent: false, | |
| items: [{ | |
| value: 'Value 1', | |
| label: 'Label 1', | |
| id: 1 | |
| }, | |
| { | |
| value: 'Value 2', | |
| label: 'Label 2', | |
| id: 2, | |
| customProperties: { | |
| random: 'I am a custom property' | |
| } | |
| }], | |
| choices:[{ | |
| value: 'Option 1', | |
| label: 'Option 1', | |
| selected: true, | |
| disabled: false, | |
| }, | |
| { | |
| value: 'Option 2', | |
| label: 'Option 2', | |
| selected: false, | |
| disabled: false, | |
| customProperties: { | |
| description: 'Custom description about Option 2', | |
| random: 'Another random custom property' | |
| }, | |
| }] | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const element = document.querySelector('#tag'); | |
| const choices = new Choices(element,{ | |
| silent: false, | |
| items: [{ | |
| value: 'Value 1', | |
| label: 'Label 1', | |
| id: 1 | |
| }, | |
| { | |
| value: 'Value 2', | |
| label: 'Label 2', | |
| id: 2, | |
| customProperties: { | |
| random: 'I am a custom property' | |
| } | |
| }], | |
| choices:[{ | |
| value: 'Option 1', | |
| label: 'Option 1', | |
| selected: true, | |
| disabled: false, | |
| }, | |
| { | |
| value: 'Option 2', | |
| label: 'Option 2', | |
| selected: false, | |
| disabled: false, | |
| customProperties: { | |
| description: 'Custom description about Option 2', | |
| random: 'Another random custom property' | |
| }, | |
| }] | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment