Golang : Populate dropdown with html/template example



Tags : golang html dropdown for-loop-range-in-html-template

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

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



Tags : golang html dropdown for-loop-range-in-html-template

By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement