{"id":25680,"date":"2016-10-14T03:01:54","date_gmt":"2016-10-13T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25680"},"modified":"2016-10-14T10:22:43","modified_gmt":"2016-10-14T00:22:43","slug":"html-select-element-selection-mode-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-selection-mode-primer-tutorial\/","title":{"rendered":"HTML Select Element Selection Mode Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Select Element Selection Mode Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.jpg\" title=\"HTML Select Element Selection Mode Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Select Element Selection Mode Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting on a quest today regarding HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) elements.  Our work concerns the difference in event behaviour between &#8230;<\/p>\n<ul>\n<li>(the default) single selection mode of use &#8230; and &#8230;<\/li>\n<li>the multiple selection mode of use<\/li>\n<\/ul>\n<p> &#8230; where, if you are familiar with this issue, you&#8217;ll probably have used an accompanying HTML button of some sort, to help you out with the event management of that second &#8220;multiple selection&#8221; mode of use.<\/p>\n<p>Our work, today, though, thinks about using a <i>timeout<\/i>, so that that second &#8220;multiple selection&#8221; mode of use no longer needs that extra HTML button (like) element.<\/p>\n<p>And so we&#8217;ve started out on this quest with a small proof of concept web application that uses Javascript DOM techniques to change &#8220;single selection&#8221; dropdowns, that suit, to be able to have a <i>timeout<\/i> control their behaviour, effectively allowing the one dropdown to access either mode of use.  For the moment, we just flag a &#8220;multiple seection&#8221; scenario with an alert box, as a comma separated list of values selected, as the handling of the actions of the underlying event require more thought regarding what to do here.<\/p>\n<p>Here is the HTML and Javascript code for your perusal that you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html_GETME\" title=\"dropdown_ms.html\">dropdown_ms.html<\/a> with its four second timeout <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html\" title=\"Click picture\">live run<\/a> for you to try, to see what we are getting at here.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Meanwhile, back at the mobile device ranch &#8230; yep &#8230; you guessed it &#8230; just about any event logic on the HTML option tag can be thought to no longer be relevant, and so we turned our attention to the idea of rewriting the HTML select event onchange event by &#8230;<\/p>\n<ul>\n<li>reading it and noting down its characteristics &#8230; hoping it is just the one function call &#8230; don&#8217;t mind up to nine arguments &#8230; but return values, am not sure yet what to do here &#8230; then &#8230;<\/li>\n<li>nullifying that onchange event &#8230; sorry, Javascript eval used &#8230;<\/li>\n<li>rewrite that onchange event encased in a setTimeout &#8220;shell&#8221; &#8230; sorry, Javascript eval used<\/li>\n<\/ul>\n<p> &#8230; and added a textarea to show you the order of stuff.<\/p>\n<p>Here is the new HTML and Javascript code for your perusal that you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html-GETME\" title=\"dropdown_ms.html\">dropdown_ms.html<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html-GETME\" title=\"dropdown_ms.html\">this way<\/a>, with its four second timeout <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html\" title=\"Click picture\">live run<\/a> for you to try, to see what we are getting at here.<\/p>\n<p>Wonder if there&#8217;s a timeout going on when you ring a phone number &#8230; <font size=1>pre-emptive <\/font><font size=2>doh<\/font>?<\/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='#d25680' onclick='var dv=document.getElementById(\"d25680\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25680' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re starting on a quest today regarding HTML select (dropdown) elements. Our work concerns the difference in event behaviour between &#8230; (the default) single selection mode of use &#8230; and &#8230; the multiple selection mode of use &#8230; where, if &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-selection-mode-primer-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":[367,400,576,2026,997,1866,1200,2027,1319],"class_list":["post-25680","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-dropdown","tag-event","tag-html","tag-javascript-dom","tag-programming","tag-select","tag-stop-press","tag-timeout","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25680"}],"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=25680"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25680\/revisions"}],"predecessor-version":[{"id":25695,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25680\/revisions\/25695"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}