luci-base: cbi.js: set .value property of cbi dropdown elements

In order to make cbi dropdowns usable for validation and other code
expecting native form elements, set the .value DOM property on the
dropdown parent element whenever the selection is changed.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 14 insertions, 6 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 3351cc8e94..662e772bb1 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -833,6 +833,7 @@ function cbi_combobox_init(id, values, def, man) {
 		})
 	]));
 
+	sb.value = obj.value;
 	obj.parentNode.replaceChild(sb, obj);
 }
 
@@ -1729,6 +1730,7 @@ CBIDropdown = {
 	saveValues: function(sb, ul) {
 		var sel = ul.querySelectorAll('li[selected]'),
 		    div = sb.lastElementChild,
+		    strval = '',
 		    values = [];
 
 		while (div.lastElementChild)
@@ -1738,17 +1740,21 @@ CBIDropdown = {
 			if (s.hasAttribute('placeholder'))
 				return;
 
+			var v = {
+				text: s.innerText,
+				value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText,
+				element: s
+			};
+
 			div.appendChild(E('input', {
 				type: 'hidden',
 				name: s.hasAttribute('name') ? s.getAttribute('name') : (sb.getAttribute('name') || ''),
-				value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText
+				value: v.value
 			}));
 
-			values.push({
-				text: s.innerText,
-				value: s.hasAttribute('data-value') ? s.getAttribute('data-value') : s.innerText,
-				element: s
-			});
+			values.push(v);
+
+			strval += strval.length ? ' ' + v.value : v.value;
 		});
 
 		var detail = {
@@ -1761,6 +1767,8 @@ CBIDropdown = {
 		else
 			detail.value = values.length ? values[0] : null;
 
+		sb.value = strval;
+
 		sb.dispatchEvent(new CustomEvent('cbi-dropdown-change', {
 			bubbles: true,
 			detail: detail