# custom javascript elements

**URL:** <https://support.prodi.gy/t/custom-javascript-elements/1496>\
**Category:** Uncategorized\
**Tags:** usage, front-end\
**Created:** [May 8, 2019, 1:31pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496 "2019-05-08T13:31:34Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [May 8, 2019, 4:20pm UTC](https://support.prodi.gy/t/custom-javascript-elements/1496/3 "2019-05-08T16:20:42Z")

</div>

To add to Matt’s comment – in your case, your `html_template` and `javascript` could look something like this:

```html
<select class="dropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<!-- other stuff here, e.g. the content, another dropdown etc. -->
<!-- properties in your task dict are available as Mustache variables -->
{{text}}

```

```javascript
document.addEventListener('prodigymount', event => {
    const dropdown = document.querySelector('.dropdown')
    dropdown.addEventListener('change', event => {
        // Update the current task with a value, or modify some other elements etc.
        window.prodigy.update({ selectedOption: event.target.value })
    })
})

```

This is just a simple example – but you could, for instance, change the options that are displayed based on the user’s selection from the first dropdown. And once the final label is selected, call `prodigy.update` to update the current task object with the data however you need it.

---

_[View the full topic](https://support.prodi.gy/t/custom-javascript-elements/1496)._