{"id":15355,"date":"2017-03-06T08:00:27","date_gmt":"2017-03-06T16:00:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15355"},"modified":"2020-04-22T06:35:43","modified_gmt":"2020-04-22T13:35:43","slug":"make-select-list-interactive-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-select-list-interactive-uxpin\/","title":{"rendered":"How to Make a Select List Interactive"},"content":{"rendered":"

Select lists, also called drop-down menus, are common web form elements that let people choose one item from a set. They\u2019re handy for letting users choose, say, a method of shipping. But with a quick interaction, they can also reveal additional information.<\/p>\n

For example, if someone chooses an option for \u201cPayPal\u201d during the checkout phase of an e-commerce flow, the form might display a PayPal login. And if they choose \u201ccredit card,\u201d a long number field and short CVV field might appear instead.<\/p>\n

Same for shipping. Not every delivery method will take the same number of days. Giving people an estimate will help them choose the best option for their needs.<\/p>\n

\"Choose<\/p>\n

Building your own options<\/h2>\n

UXPin has a HTML-like select or \u201cdrop-down\u201d element \u2014 just search<\/a> for \u201cselectlist\u201d. But it\u2019s a little-known fact that you can create actions based on which item the user selects. You can use this to hide or reveal information and other form elements as required. Here\u2019s how it works.<\/p>\n