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

Issue

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

Solution

Here is the Dart code:

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

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

@observable
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>
</select>

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)