Liaisons / Liaisons de select • Svelte Tutorial

Bases de Svelte Liaisons Liaisons de select

Nous pouvons aussi utiliser bind:value avec des éléments <select> :

App

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

Notez que les valeurs d’<option> sont des objets plutôt que des chaînes de caractères. Svelte s’en fiche.

Puisque nous n’avons pas défini de valeur initiale pour selected, la liaison va automatiquement utiliser la valeur par défaut (la première dans la liste). Faites toutefois attention — tant que la liaison n’est pas initialisée, selected reste à undefined, ce qui empêche de facto de référencer aveuglément selected en écrivant par exemple selected.id dans le template.

Modifier cette page sur Github

précédent suivant

Checkbox Inputs de groupe

<script>

	let questions = $state([

			id: 1,

			text: `Où êtes-vous allé à l'école ?`

},

			id: 2,

			text: `Quel est le nom de jeune fille de votre mère ?`

},

			id: 3,

			text: `Quelle information personnelle une personne mal intentionnée pourrait aisément trouver

grâce à Google ?`

]);

	let selected = $state();

	let answer = $state('');

	function handleSubmit(e) {

		e.preventDefault();

		alert(

			`vous avez répondu à la question ${selected.id} (${selected.text}) avec "${answer}"`

);

</script>

<h2>Questions pas du tout sécurisées</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">

		Envoyer

	</button>

</form>

<p>

	question sélectionnée {selected

		? selected.id

		: '[chargement...]'}

</p>

show text show editor