{"id":27104,"date":"2016-12-25T03:01:20","date_gmt":"2016-12-24T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27104"},"modified":"2016-12-24T16:08:56","modified_gmt":"2016-12-24T06:08:56","slug":"html-select-element-dynamic-multiple-attribute-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-tutorial\/","title":{"rendered":"HTML Select Element Dynamic Multiple Attribute Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tz_places_multiple_video.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Tutorial<\/p><\/div>\n<p>Am sure a lot of web programmers would like to invent some generic code to allow the HTML select (&#8220;dropdown&#8221;) element be able to toggle between the &#8230;<\/p>\n<ol>\n<li>Single select attribute mode &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>Multiple<\/a> select attribute mode<\/li>\n<\/ol>\n<p> &#8230; dynamically, using Javascript DOM.  But in order to be able to write a practically useful generic bit of code you have to have a confluence of agreed design guidelines, with lots of people participating and sticking to the guidelines, or have a concept whose predictability about &#8220;event&#8221; logic is pretty easy to envisage and define, for a lot of programmers to agree upon.  But trying to pin down the &#8220;event&#8221; logic of a &#8230;<\/p>\n<ul>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onchange<\/i> event &#8230; or even the &#8230;<\/li>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onclick<\/i> event (as a first &#8220;wild&#8221; thought getting into the problem)<\/li>\n<\/ul>\n<p> &#8230; is like catching a worm at the bottom of a 27 storey building being thrown from the top &#8230; you need to know when to give up too &#8230; think <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this salutary thought<\/a>.<\/p>\n<p>But that doesn&#8217;t mean the idea of an HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled is not a good idea, but it just means you need to focus on &#8230;<\/p>\n<ul>\n<li>Should it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter<\/li>\n<li>Define what can be done to repeat the actions of the (what was only for the Single attribute mode of use) <i>onchange<\/i> event logic but for a scenario where that is applied several times for variable inputs, and is that requirement &#8230;\n<ol>\n<li>synchronous &#8230; or &#8230;<\/li>\n<li>asynchronous<\/li>\n<\/ol>\n<p> &#8230; and for us, today, we need &#8220;synchronous&#8221; alas (as &#8220;asynchronous&#8221; would be a lot easier) &#8230; and this will become apparent later\n<\/li>\n<\/ul>\n<p>Okay, &#8220;later&#8221; has arrived, and it is time to define where we applied an example of <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> in our web applications.  We decided to do it for our interfacings to our &#8230;<\/p>\n<ul>\n<li><a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> to change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.html'>this way<\/a>, for today&#8217;s work, and that we last tweaked with <a target=_blank title='Australian Indigenous Language HTML Map Audio and YouTube Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-audio-and-youtube-tutorial\/'>Australian Indigenous Language HTML Map Audio and YouTube Tutorial<\/a> &#8230; and that supervises &#8230;<\/li>\n<li>&#8220;Child&#8221; HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>stop_start_youtube.html<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>this way<\/a> for today&#8217;s work, both establishing each other&#8217;s requirements for this new functionality via URL get parameter usage (ie. via use of the ? and &#038; of URLs), with or without HTML form element usage<\/li>\n<\/ul>\n<p>As we said earlier, we&#8217;re dealing with &#8220;synchronous&#8221; requirements here, giving the user the nominal video duration time, plus twenty seconds, to view the current video before the &#8220;child&#8221; calls the &#8220;parent&#8221; to change videos, powered via the Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer functionality, possible only because of the YouTube API&#8217;s video duration time information (which we already had stored on the text of the &#8220;dropdown&#8221; &#8230; we must have seen this coming?!).<\/p>\n<p>Okay, what we are doing here can be defined, and that is good for this project, but can you imagine a generic <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> for all the other myriad of uses HTML select (&#8220;dropdown&#8221;) elements are put to by programmers &#8230; recalls to mind that lame excuse at school &#8230; &#8220;it depends&#8221; &#8230; but that is true here, and generic thoughts will need a much more lateral thought process &#8220;outside the box&#8221; to get towards a better generic idea.<\/p>\n<p>However, in the meantime, this change today will have made quite a lot of difference to &#8230;<\/p>\n<ul>\n<li>YouTube API for Iframe embedded videos &#8220;parent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm'>live run<\/a> (where you perform a Search for YouTube videos of interest such as <a target=_blank title='Example search' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide'>this Adelaide search<\/a> example) &#8230; and the recent &#8230;<\/li>\n<li>TimeZone Places &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='tz_places.php'>live run<\/a> &#8230; and &#8230;<\/li>\n<li>Australian Indigenous Languages &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" title=\"aboriginal_language_regions.html\">live run<\/a> &#8230; and &#8230;<\/li>\n<li>Country Quiz &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" title=\"country_flag_quiz.php\">live run<\/a><\/li>\n<\/ul>\n<p>And we hope you get something out of trying out this new additional functionality &#8230; the Single attribute mode of use is unchanged.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27104' onclick='var dv=document.getElementById(\"d27104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27104' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Am sure a lot of web programmers would like to invent some generic code to allow the HTML select (&#8220;dropdown&#8221;) element be able to toggle between the &#8230; Single select attribute mode &#8230; and &#8230; Multiple select attribute mode &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[354,367,2091,400,587,652,2092,1631,997,1866,1125,2093,1319,1369,1493,2017],"class_list":["post-27104","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-dom","tag-dropdown","tag-duration","tag-event","tag-iframe","tag-javascript","tag-multiple","tag-onchange","tag-programming","tag-select","tag-setinterval","tag-single","tag-tutorial","tag-video","tag-youtube","tag-youtube-api"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27104"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=27104"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27104\/revisions"}],"predecessor-version":[{"id":27109,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27104\/revisions\/27109"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}