version 2.1.1, resolved issue #1

smarek · Sep 13, 2023 · 5ea885d · 5ea885d
1 parent 6bb4c96
commit 5ea885d
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -34,3 +34,7 @@
 ## 2.1.0
 
   Added option `autoSelectSingleOptions` to allow automatic pre-selection of option if there is only single one (works recursively)
+
+## 2.1.1
+
+  Multiple instances on the same page should now work without cross-contamination
diff --git a/demo_multiple.html b/demo_multiple.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>jQuery Chained Selects Demo</title>
+    <style type="text/css">
+        .container {
+            width: 70%;
+            margin: 0 auto;
+        }
+
+        form {
+            margin: 10px;
+        }
+
+        select {
+            width: 100%;
+            font-size: 1.5em;
+            padding: 10px;
+            margin: 4px 0;
+        }
+
+        textarea {
+            width: 100%;
+            min-height: 500px;
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h2>Form Example</h2>
+    <form method="post" action="https://httpbin.org/post">
+		<div id="firstChain" style="border: 3px solid black; margin-bottom: 2rem; background-color: grey;">
+			<h3>First Chain</h3>
+		</div>
+		<div id="secondChain" style="border: 3px solid black; margin-bottom: 2rem; background-color: lightblue;">
+			<h3>Second Chain</h3>
+		</div>
+        <button type="submit">Submit</button>
+    </form>
+    <h2>Test your JSON Data</h2>
+    <textarea id="json">{
+	"A": {
+		"AA": {
+			"1": "AAA"
+		},
+		"AB": {
+			"2": "ABA"
+		}
+	},
+	"B": {
+		"BA": {
+			"BAA": {
+				"3": "BAAA"
+			}
+		}
+	},
+	"C": {
+		"CA": {
+			"4": "CAA"
+		},
+		"CB": {
+			"5": "CBA"
+		},
+		"CC": {
+			"CCA": {
+				"6": "CCAA",
+				"7": "CCAB"
+			}
+		}
+	}
+}</textarea>
+    <button id="load_json">Load JSON</button>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script src="jquery.chained.selects.js"></script>
+<script type="text/javascript">
+    var chainedData1 = {};
+	var chainedData2 = {};
+
+    function loadJson() {
+        $("form select").remove();
+
+		$("#firstChain").append($("<select name=\"example1\" id=\"example1\"></select>"));
+		$("#secondChain").append($("<select name=\"example2\" id=\"example2\"></select>"));
+
+        chainedData1 = JSON.parse($("#json").val());
+		chainedData2 = JSON.parse($("#json").val());
+
+		$('#example1').chainedSelects({
+			data: chainedData1,
+			loggingEnabled: true,
+			'onSelectedCallback': function (id) { if(console !== undefined) { console.log("chain1 selected option", id); } },
+		});
+
+		$('#example2').chainedSelects({
+			data: chainedData2,
+			loggingEnabled: true,
+			'onSelectedCallback': function (id) { if(console !== undefined) { console.log("chain2 selected option", id); } },
+		});
+
+    }
+
+    $(document).ready(function () {
+        $("#load_json").click(loadJson);
+        loadJson();
+    });
+</script>
+</body>
+</html>
+
diff --git a/jquery.chained.selects.js b/jquery.chained.selects.js
@@ -17,7 +17,7 @@
 
     function ChainedSelect(element, options) {
         this.element = $(element);
-        this.options = $.extend(defaults, options);
+        this.options = $.extend({}, defaults, options);
         this.init();
     }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-chained-selects",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "jQuery plugin to create chained selects from JSON data",
   "main": "jquery.chained.selects.js",
   "scripts": {