{"record":{"id":"962a6d3cd0b467be","repo":"SignalR/SignalR","slug":"options-binding-applies-only-to-select-elements","errorCode":null,"errorMessage":"options binding applies only to SELECT elements","messagePattern":"options binding applies only to SELECT elements","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"samples/Microsoft.AspNet.SignalR.LoadTestHarness/Scripts/knockout-2.1.0.debug.js","lineNumber":2260,"sourceCode":"            // Workaround for IE6 bug: It won't reliably apply values to SELECT nodes during the same execution thread\n            // right after you've changed the set of OPTION nodes on it. So for that node type, we'll schedule a second thread\n            // to apply the value as well.\n            var alsoApplyAsynchronously = valueIsSelectOption;\n            if (alsoApplyAsynchronously)\n                setTimeout(applyValueAction, 0);\n        }\n\n        // If you try to set a model value that can't be represented in an already-populated dropdown, reject that change,\n        // because you're not allowed to have a model value that disagrees with a visible UI selection.\n        if (valueIsSelectOption && (element.length > 0))\n            ensureDropdownSelectionIsConsistentWithModelValue(element, newValue, /* preferModelValue */ false);\n    }\n};\n\nko.bindingHandlers['options'] = {\n    'update': function (element, valueAccessor, allBindingsAccessor) {\n        if (ko.utils.tagNameLower(element) !== \"select\")\n            throw new Error(\"options binding applies only to SELECT elements\");\n\n        var selectWasPreviouslyEmpty = element.length == 0;\n        var previousSelectedValues = ko.utils.arrayMap(ko.utils.arrayFilter(element.childNodes, function (node) {\n            return node.tagName && (ko.utils.tagNameLower(node) === \"option\") && node.selected;\n        }), function (node) {\n            return ko.selectExtensions.readValue(node) || node.innerText || node.textContent;\n        });\n        var previousScrollTop = element.scrollTop;\n\n        var value = ko.utils.unwrapObservable(valueAccessor());\n        var selectedValue = element.value;\n\n        // Remove all existing <option>s.\n        // Need to use .remove() rather than .removeChild() for <option>s otherwise IE behaves oddly (https://github.com/SteveSanderson/knockout/issues/134)\n        while (element.length > 0) {\n            ko.cleanNode(element.options[0]);\n            element.remove(0);\n        }","sourceCodeStart":2242,"sourceCodeEnd":2278,"githubUrl":"https://github.com/SignalR/SignalR/blob/693053b89a9e1f5ce819e3233ed159a6409de22b/samples/Microsoft.AspNet.SignalR.LoadTestHarness/Scripts/knockout-2.1.0.debug.js#L2242-L2278","documentation":"Knockout's `options` binding rebuilds the `<option>` children of a `<select>`. Its `update` handler rejects any element whose lowercased tag name is not `select`, because the logic depends on select-specific DOM properties (`element.childNodes`, option selection). The throw happens during binding evaluation.","triggerScenarios":"Writing `data-bind=\"options: items\"` on an element that is not a `<select>` (e.g. `<input>`, `<ul>`, `<div>`).","commonSituations":"Copy-pasting a binding from a `<select>` onto a different element type, or dynamically swapping the element type while the binding is active.","solutions":["Move the `options` binding onto a `<select>` element.","For non-select lists use `foreach` (with `<li>`/`<option>` templates) instead of `options`.","Re-check the markup where the binding is declared."],"exampleFix":"// before\n<input data-bind=\"options: items\" />\n\n// after\n<select data-bind=\"options: items\"></select>","handlingStrategy":"validation","validationCode":"// Static markup check helper\nfunction assertSelectForOptions(el) {\n    if (el && el.tagName && el.tagName.toLowerCase() !== 'select') {\n        console.error('options binding must be on a <select>, got <' + el.tagName.toLowerCase() + '>');\n        return false;\n    }\n    return true;\n}","typeGuard":"function isSelectElement(el) { return !!el && el.nodeType === 1 && el.tagName.toLowerCase() === 'select'; }","tryCatchPattern":null,"preventionTips":["Pair `options` exclusively with `<select>` in templates.","Add a lint/template review step that flags `data-bind=\"options:` outside selects."],"tags":["knockout","binding","options","dom"],"backgroundTag":null,"analyzedSha":"693053b89a9e1f5ce819e3233ed159a6409de22b","analyzedAt":"2026-08-13T22:23:59.793Z","schemaVersion":2},"datasetVersion":"2026-08-14T00:17:13.853Z"}