Golang : Populate dropdown with html/template example

Creating a clickable dropdown button or HTML select tag is a common task for populating a form. Here is a simple example how to create HTML clickable dropdown or select tag in Golang:

 package main

 import (
 "net/http"
 )

 func SimpleSelectTag(w http.ResponseWriter, r *http.Request) {
 html := `<!DOCTYPE html>
 <html>
 <body>

 <select>
 <option value="apple">Apple</option>
 <option value="orange">Orange</option>
 <option value="pear">Pear</option>
 <option value="grape">Grape</option>
 </select>

 </body>
 </html>`

 w.Write([]byte(html))
 }

 func main() {
 mux := http.NewServeMux()
 mux.HandleFunc("/", SimpleSelectTag)

 http.ListenAndServe(":8080", mux)
 }

Run the code above and point your browser to localhost:8080 or yourwebsitename.com:8080 should give you a dropdown button.

HTML output:

 <!DOCTYPE html>
 <html>
 <body>

 <select>
 <option value="apple">Apple</option>
 <option value="orange">Orange</option>
 <option value="pear">Pear</option>
 <option value="grape">Grape</option>
 </select>

 </body>
 </html>

now, if you are extracting the dropdown elements from a database, you need to loop through the elements in order to populate the dropdown. This next example will show you how to do just that with html/template package and how to do a for loop inside the template.

 package main

 import (
 "html/template"
 "net/http"
 )

 type DropdownItem struct {
 Name  string
 Value string
 }

 var fruits = map[string]interface{}{
 "Apple":  "apple",
 "Orange": "orange",
 "Pear": "pear",
 "Grape":  "grape",
 }

 var capitals = map[string]interface{}{
 "Japan": "Tokyo",
 "Australia": "Canberra",
 "New Zealand": "Auckland",
 "China": "Beijing",
 "Russia": "Moscow",
 "Malaysia": "Kuala Lumpur",
 }

 func Dropdown(w http.ResponseWriter, r *http.Request) {

 html := `<!DOCTYPE html>
 <html>
 <body>

 <select> // for loop in html template example
 {{range $key, $value := .}}
 <option value="{{ $value }}">{{ $key }}</option>
 {{end}}


 </select>

 </body>
 </html>`

 dropdownTemplate, err := template.New("dropdownexample").Parse(string(html))
 if err != nil {
 panic(err)
 }

 // populate dropdown with fruits
 dropdownTemplate.Execute(w, fruits)

 // populate dropdown with capital cities
 dropdownTemplate.Execute(w, capitals)

 // no need for this...
 //w.Write([]byte(html))
 }

 func main() {
 mux := http.NewServeMux()
 mux.HandleFunc("/", Dropdown)

 http.ListenAndServe(":8080", mux)
 }

Run the code above and refresh you browser. You should be able to see the following output in the page source code.

 <!DOCTYPE html>
 <html>
 <body>

 <select>

 <option value="apple">Apple</option>

 <option value="grape">Grape</option>

 <option value="orange">Orange</option>

 <option value="pear">Pear</option>



 </select>

 </body>
 </html><!DOCTYPE html>
 <html>
 <body>

 <select>

 <option value="Canberra">Australia</option>

 <option value="Beijing">China</option>

 <option value="Tokyo">Japan</option>

 <option value="Kuala Lumpur">Malaysia</option>

 <option value="Auckland">New Zealand</option>

 <option value="Moscow">Russia</option>



 </select>

 </body>
 </html>

Hope this helps! To process the values from the dropdown button, see how to use FormValue in https://www.socketloop.com/tutorials/golang-get-checkbox-or-extract-multipart-form-data-value-example

Check Out As Well:

Encapsulate HTML attributes

References:

https://www.socketloop.com/references/golang-html-template-template-parse-function-example

http://stackoverflow.com/questions/21302520/golang-iterating-through-map-in-template

Golang : Populate dropdown with html/template example

See also : Golang : Get checkbox or extract multipart form data value example

By Adam Ng

Advertisement

Tutorials