├── README.md ├── examples ├── custom plugin options │ ├── index.html │ ├── main.css │ └── main.js ├── disabling and re-enabling the simpleselect │ ├── index.html │ ├── main.css │ └── main.js ├── updating select options on the fly │ ├── index.html │ ├── main.css │ └── main.js └── watching the change event │ ├── index.html │ ├── main.css │ └── main.js ├── jquery.simpleselect.css ├── jquery.simpleselect.js ├── jquery.simpleselect.min.css └── jquery.simpleselect.min.js /README.md: -------------------------------------------------------------------------------- 1 | # jQuery.SimpleSelect 2 | 3 | jQuery.simpleselect makes every ` 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |

52 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 53 |

54 |

55 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 56 |

57 |

58 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 59 |

60 |

61 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 62 |

63 |

64 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 65 |

66 |

67 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 68 |

69 |

70 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 71 |

72 |

73 | This text is placed here to take some space at the bottom of the document. This way, you can see how the options list overflows past the window's bounds (displayContainerInside option), but doesn't get any closer than 100px to the bottom edge of the document (containerMargin option). 74 |

75 | 76 | -------------------------------------------------------------------------------- /examples/custom plugin options/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 100px; 3 | margin: 0; 4 | background: #fff; 5 | font: 14px Arial, Helvetica, Geneva, sans-serif; 6 | line-height: 1.5em; 7 | color: #3a3a3a; 8 | } 9 | 10 | .placeholder-text { 11 | margin: 40px 0; 12 | color: #aaa; 13 | font-style: italic; 14 | } -------------------------------------------------------------------------------- /examples/custom plugin options/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | $("#example-select").simpleselect({ 4 | fadingDuration: 500, 5 | containerMargin: 100, 6 | displayContainerInside: "document" 7 | }); 8 | 9 | }); -------------------------------------------------------------------------------- /examples/disabling and re-enabling the simpleselect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | or 14 | then 15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 | 23 | 35 | 36 | -------------------------------------------------------------------------------- /examples/disabling and re-enabling the simpleselect/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 200px; 3 | margin: 0; 4 | background: #fff; 5 | font: 14px Arial, Helvetica, Geneva, sans-serif; 6 | line-height: 1.5em; 7 | color: #3a3a3a; 8 | } 9 | 10 | body > div:first-child { 11 | display: inline-block; 12 | margin-bottom: 40px; 13 | } 14 | 15 | label { 16 | display: block; 17 | } -------------------------------------------------------------------------------- /examples/disabling and re-enabling the simpleselect/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | var select = $("#example-select").simpleselect(); 4 | 5 | $("#disable-select").on("click", function() { 6 | select.prop("disabled", true); 7 | }); 8 | 9 | $("#enable-select").on("click", function() { 10 | select.prop("disabled", false); 11 | }); 12 | 13 | $("#refresh-simpleselect-state").on("click", function() { 14 | select.simpleselect("refreshState"); 15 | }); 16 | 17 | $("#disable-simpleselect").on("click", function() { 18 | select.simpleselect("disable"); 19 | }); 20 | 21 | $("#enable-simpleselect").on("click", function() { 22 | select.simpleselect("enable"); 23 | }); 24 | 25 | }); -------------------------------------------------------------------------------- /examples/updating select options on the fly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 26 |
27 |
28 |
29 | 30 | 31 | 32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /examples/updating select options on the fly/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 160px; 3 | margin: 0; 4 | background: #fff; 5 | font: 14px Arial, Helvetica, Geneva, sans-serif; 6 | line-height: 1.5em; 7 | color: #3a3a3a; 8 | } 9 | 10 | body > div { 11 | float: left; 12 | margin: 40px 40px 0 0; 13 | } 14 | 15 | input[type="text"] { 16 | height: 18px; 17 | padding: 9px 10px; 18 | border: 1px solid #ddd; 19 | line-height: 18px; 20 | -webkit-border-radius: 2px; 21 | -moz-border-radius: 2px; 22 | border-radius: 2px; 23 | } 24 | 25 | input[type="submit"] { 26 | visibility: hidden; 27 | } 28 | 29 | label { 30 | display: block; 31 | } 32 | 33 | label[for="should-select-option"] { 34 | display: inline; 35 | } -------------------------------------------------------------------------------- /examples/updating select options on the fly/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | var select = $("#example-select").simpleselect(), 4 | newOptionInput = $("#add-option"), 5 | newOptionAutoSelectionCheckbox = $("#should-select-option"), 6 | newOption; 7 | 8 | $("#add-option-form").on("submit", function(e) { 9 | e.preventDefault(); 10 | 11 | newOption = $("