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>

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 3351cc8e94df198f6f734b589f5da13c09513be1..662e772bb1630d531790e20f24c3605bc8cb3749 100644 (file)
--- 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