wc-dropdown

Dropdown menu web component.

Install

$ npm install wc-dropdown

Syntax

<script src="dropdown.js"></script>

<form action="#" method="POST">
    <dropdown-menu
      placeholder="Please select one"
      maxitems="5"
      name="city"
      options="[
        {&quot;name&quot;: &quot;option 1&quot;, &quot;value&quot;:&quot;A01&quot;},
        {&quot;name&quot;: &quot;option 2&quot;, &quot;value&quot;:&quot;A02&quot;},
        {&quot;name&quot;: &quot;option 3&quot;, &quot;value&quot;:&quot;A03&quot;},
        {&quot;name&quot;: &quot;option 4&quot;, &quot;value&quot;:&quot;A04&quot;}
      ]"
    ></dropdown-menu>
    <input type="submit" value="submit" />
</form>

Demo page

The demo page: https://yishiashia.github.io/dropdown.html

Usage

If you want to customize this web component, you can import the library and implement your new class by extend Dropdown.

import Dropdown from "wc-dropdown";

class customizedDropdown extends Dropdown {
    // override here
}

Options

• placeholder
• maxitems
• name
• options

placeholder

String type. The hint words of dropdown menu.

maxitems

Number type. The max length of displayed items at one time in the dropdown menu.

name

String typs. The name of input, it would be the POST parameter name.

options

Array of option item. Each option item include at least name and value fields.

example:

[
  {"name": "option 1", "value": "a1"},
  {"name": "option 2", "value": "a2"},
  {"name": "option 3", "value": "a3"}
]

When passing options as element attribute, it must escape the quotes mark, for example:

[
  {"name": "option 1", "value": "a1"},
  {"name": "option 2", "value": "a2"},
  {"name": "option 3", "value": "a3"}
]

Another way to set options is using javascript:

let menuElement = document.querySelector('dropdown-menu')

menuElement.options = [
  {name: "option 1", value: "option_1"},
  {name: "option 2", value: "option_2"},
  {name: "option 3", value: "option_3"}
]

Event

change event

When user choose one option, a change event will be dispatch, and you can bind an event listener to handle it:

let menuElement = document.querySelector('dropdown-menu')

menuElement.addEventListener('change', function(option) {
  console.log(option.detail)
  /*
    output example:
      { name: "option 2", value: "option_2" }
   */
})