How do I set a default selected option in a Web UI <select> tag?


I have have a <select> tag with a few options. How do I set the initially default selected option?


Here is the Dart code:

import 'dart:html';
import 'package:web_ui/web_ui.dart';

List<String> fruits = const <String>['apples', 'bananas', 'pears'];

String selected = 'pears';

void main() { }

Here is the HTML code:

<p>Hello world from Dart!  You chose {{ selected }}</p>

<select name="fruit" template iterate="fruit in fruits" bind-value="selected">
  <option selected="{{selected == fruit}}">{{fruit}}</option>

Note, there is an open request to make this a bit easier. In the meantime, the above code should work for you.

Answered By – Seth Ladd

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *