# HTML connect to dropdown node

**URL:** <https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284>\
**Category:** General\
**Created:** [3 February 2021 06:15 UTC](https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284 "2021-02-03T06:15:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jamil100](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jamil100/32/35986_2.png) [@Jamil100](https://discourse.nodered.org/u/Jamil100)\
**Post date:** [3 February 2021 06:15 UTC](https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284/1 "2021-02-03T06:15:02Z")

</div>

Hello everyone, I have created a template that when you press an item in the dropdown list, it makes the word "Machine" be bold. Something like this below.

But I would also like to have the feature that when I press the word "Machine 1" on the picture. I would like the dropdown node to automatically choose Machine 1.

I would appreciate any help.

 ![fuWBTXsSk6](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c91fbf4e8418c35df71fd8cda64ca47901ae892.gif)

```auto
[{"id":"24979d80.621452","type":"ui_template","z":"5d3f964c.fef898","group":"da148e61.f015f","name":"","order":9,"width":"12","height":"8","format":"<style>\n\n/* Container holding the image and the text */\n.container {\n position: relative;\n text-align: center;\n color: white;\n}\n\n/* Centered text */\n.text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 16px;\n font-weight: 300;\n}\n\n.bold {\n font-weight: 800;\n}\n\n\n</style>\n\n<div class=\"container\">\n <img src=\"https://cdn.pixabay.com/photo/2016/03/04/19/36/gears-1236578_960_720.jpg\" alt=\"Machine 1\" style=\"width:200px;\">\n <div id=\"machine1\" class=\"text\">Machine 1</div>\n</div>\n\n<div class=\"container\">\n <img src=\"https://cdn.pixabay.com/photo/2016/06/12/20/27/macro-1452987_960_720.jpg\" alt=\"Machine 2\" style=\"width:200px;\">\n <div id=\"machine2\" class=\"text\">Machine 2</div>\n</div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n debugger\n if (msg && msg.topic == \"select_machine\") {\n $(\".text\").removeClass(\"bold\");//remove bold class from all .text\n var machineTextSel = \"#\" + msg.payload; //make selector \n $(machineTextSel).addClass(\"bold\"); //add bold to chosen item\n }\n });\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":740,"y":2100,"wires":[[]]},{"id":"663aaaac.1121e4","type":"ui_dropdown","z":"5d3f964c.fef898","name":"","label":"Machine","tooltip":"","place":"Select Machine","group":"","order":5,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"Machine 1","value":"machine1","type":"str"},{"label":"Machine 2","value":"machine2","type":"str"}],"payload":"","topic":"select_machine","x":560,"y":2100,"wires":[["24979d80.621452"]]},{"id":"da148e61.f015f","type":"ui_group","name":"Demo","tab":"da5706ae.6caf58","order":3,"disp":true,"width":"12","collapse":false},{"id":"da5706ae.6caf58","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [3 February 2021 08:23 UTC](https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284/2 "2021-02-03T08:23:43Z")

</div>

Please dont open multiple topics about the same problems.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 February 2021 08:26 UTC](https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284/3 "2021-02-03T08:26:52Z")

</div>

Closing this thread - please stick to original topic.  
[How to select item in dropdown by clicking picture](https://discourse.nodered.org/t/how-to-select-item-in-dropdown-by-clicking-picture/40263/1)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 February 2021 08:26 UTC](https://discourse.nodered.org/t/html-connect-to-dropdown-node/40284/4 "2021-02-03T08:26:57Z")

</div>