首页 发现 帮助
登录
hugh
/
select2
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Add "common problems" section and address #4217

alexweissman 7 年之前
父节点
fa1d12582c
当前提交
553f6aa00d
共有 5 个文件被更改，包括 59 次插入 和 4 次删除
合并视图 显示文件统计
  1. 2 0
      config/site.yaml
  2. 0 0
      pages/02.troubleshooting/01.getting-help/docs.md
  3. 42 0
      pages/02.troubleshooting/02.common-problems/docs.md
  4. 11 0
      pages/02.troubleshooting/chapter.md
  5. 4 4
      pages/07.dropdown/docs.md

+ 2 - 0
config/site.yaml
查看文件 

@@ -6,3 +6,5 @@ taxonomies: [category,tag]
 
 summary:
 
 summary:
 
   size: 300
 
   size: 300
 
 
 
+redirects:
 
+    /getting-help: /troubleshooting/getting-help

+ 0 - 0
pages/02.getting-help/docs.md → pages/02.troubleshooting/01.getting-help/docs.md
查看文件


+ 42 - 0
pages/02.troubleshooting/02.common-problems/docs.md
查看文件 

@@ -0,0 +1,42 @@
 
+---
 
+title: Common problems
 
+metadata:
 
+    description: Commonly encountered issues when using Select2.
 
+taxonomy:
 
+    category: docs
 
+---
 
+
 
+### Select2 does not function properly when I use it inside a Bootstrap modal.
 
+
 
+This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal.  Since by default, Select2 [attaches the dropdown menu to the `<body>` element](/dropdown#dropdown-placement), it is considered "outside of the modal".
 
+
 
+To avoid this problem, you may attach the dropdown to the modal itself with the [dropdownParent](/dropdown#dropdown-placement) setting:
 
+
 
+```
 
+<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
 
+    ...
 
+    <select id="mySelect2">
 
+        ...
 
+    </select>
 
+    ...
 
+</div>
 
+
 
+...
 
+
 
+<script>
 
+    $('#mySelect2').select2({
 
+        dropdownParent: $('#myModal')
 
+    });
 
+</script>
 
+```
 
+
 
+This will cause the dropdown to be attached to the modal, rather than the `<body>` element.
 
+
 
+**Alternatively**, you may simply globally override Bootstrap's behavior:
 
+
 
+```
 
+// Do this before you initialize any of your modals
 
+$.fn.modal.Constructor.prototype.enforceFocus = function() {};
 
+```
 
+
 
+See [this answer](https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/19574076#19574076) for more information.

+ 11 - 0
pages/02.troubleshooting/chapter.md
查看文件 

@@ -0,0 +1,11 @@
 
+---
 
+title: Troubleshooting
 
+metadata:
 
+    description: The chapter covers some common issues you may encounter with Select2, as well as where you can go to get help.
 
+taxonomy:
 
+    category: docs
 
+---
 
+
 
+# Troubleshooting
 
+
 
+The chapter covers some common issues you may encounter with Select2, as well as where you can go to get help.

+ 4 - 4
pages/07.dropdown/docs.md
查看文件 

@@ -55,7 +55,7 @@ If you need to render HTML with your result template, you must wrap your rendere
 
 Select2 can be configured to automatically select the currently highlighted result when the dropdown is closed by using the `selectOnClose` option:
 
 Select2 can be configured to automatically select the currently highlighted result when the dropdown is closed by using the `selectOnClose` option:
 
 
 
 ```
 
 ```
 
-$('select').select2({
 
+$('#mySelect2').select2({
 
   selectOnClose: true
 
   selectOnClose: true
 
 });
 
 });
 
 ```
 
 ```
 
@@ -65,7 +65,7 @@ $('select').select2({
 
 Select2 will automatically close the dropdown when an element is selected, similar to what is done with a normal select box.  You may use the `closeOnSelect` option to prevent the dropdown from closing when a result is selected:
 
 Select2 will automatically close the dropdown when an element is selected, similar to what is done with a normal select box.  You may use the `closeOnSelect` option to prevent the dropdown from closing when a result is selected:
 
 
 
 ```
 
 ```
 
-$('select').select2({
 
+$('#mySelect2').select2({
 
   closeOnSelect: false
 
   closeOnSelect: false
 
 });
 
 });
 
 ```
 
 ```
 
@@ -85,8 +85,8 @@ Select2 will display the dropdown above the container if there is not enough spa
 
 The `dropdownParent` option allows you to pick an alternative element for the dropdown to be appended to:
 
 The `dropdownParent` option allows you to pick an alternative element for the dropdown to be appended to:
 
 
 
 ```
 
 ```
 
-$('select').select2({
 
-  dropdownParent: $('#my_amazing_modal')
 
+$('#mySelect2').select2({
 
+  dropdownParent: $('#myModal')
 
 });
 
 });
 
 ```
 
 ```