ssrSelectValue

The options of a <select> with the ones its value stands for marked selected.

The options of a <select> with the ones its value stands for marked selected. A browser ignores a value attribute on <select>, so the server flags the options instead: the option whose value attribute equals the value (or, with no such attribute, whose text does) is selected, and every other option loses selected. An array selects every listed option, for <select multiple>; a single value selects the first match, like select.value = x. null and undefined stand for the empty string. Options inside <optgroup>, control flow and components are found because the search runs on the serialized children. Values are compared, never written, so they cannot add markup.

Import#

import { ssrSelectValue } from "@shadow-js/web/server";

Signature#

function ssrSelectValue(value: unknown, children: unknown): SsrNode

Parameters#

Name	Description
`value`	The select's `value`, or an accessor of it. Entries of an array are compared as strings; `null` and `undefined` entries are skipped.
`children`	The select's children (an `SsrNode`, or anything `escape` accepts).

Returns#

The children with the selected flags set, as a trusted SsrNode.

Throws#

TypeError UNRECOGNIZED_INSERT_VALUE when the value is a symbol, and the errors of escape for the children.

Examples#

import { renderToString, ssr, ssrRaw, ssrSelectValue } from "@shadow-js/web/server";

const options = ssrRaw(`<option value="red">Red</option><option value="blue">Blue</option>`);
const html = renderToString(() => ssr(["<select>", "</select>"], ssrSelectValue("blue", options)));
// '<select><option value="red">Red</option><option value="blue" selected>Blue</option></select>'