Bindings / Select bindings • Svelte Tutorial

Basic Svelte Bindings Select bindings

<select> 要素にも bind:value を使用できます。

App

<select
	bind:value={selected}
	onchange={() => answer = ''}
>

<option> の値は文字列ではなくオブジェクトであることにご注意ください。Svelteは気にしません。

selected の初期値を設定していないので、バインディングは自動的にデフォルト値(配列の先頭)に設定されます。しかし、注意してください。バインディングが初期化されるまで、selected は undefined のままなので、よく考えもせずにテンプレート内の selected.id などを参照することはできません。

Edit this page on GitHub

previous next

Checkbox inputs Group inputs

<script>

	let questions = $state([

			id: 1,

			text: `Where did you go to school?`

},

			id: 2,

			text: `What is your mother's name?`

},

			id: 3,

			text: `What is another personal fact that an attacker could easily find with Google?`

]);

	let selected = $state();

	let answer = $state('');

	function handleSubmit(e) {

		e.preventDefault();

		alert(

			`answered question ${selected.id} (${selected.text}) with "${answer}"`

);

</script>

<h2>Insecurity questions</h2>

<form onsubmit={handleSubmit}>

	<select

		value={selected}

		onchange={() => (answer = '')}

		{#each questions as question}

			<option value={question}>

				{question.text}

			</option>

		{/each}

	</select>

	<input bind:value={answer} />

	<button disabled={!answer} type="submit">

		Submit

	</button>

</form>

<p>

	selected question {selected

		? selected.id

		: '[waiting...]'}

</p>

show text show editor