Javascript: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
Javascript approaches to do the same task | Javascript approaches to do the same task | ||
== Get the document by id == | |||
* <nowiki>document.getElementById('abcId')</nowiki> | * <nowiki>document.getElementById('abcId')</nowiki> | ||
* alternative: (1) Get the id attribute by using jQuery attr(): <nowiki>$("selector").attr("id");</nowiki><ref>[http://api.jquery.com/attr/ .attr() | jQuery API Documentation]</ref> ([http://jsfiddle.net/planetoid/Ffvwz/ example]) and (2) go to the first step | * alternative: (1) Get the id attribute by using jQuery attr(): <nowiki>$("selector").attr("id");</nowiki><ref>[http://api.jquery.com/attr/ .attr() | jQuery API Documentation]</ref> ([http://jsfiddle.net/planetoid/Ffvwz/ example]) and (2) go to the first step | ||
* parallel naming rules for html elemnt tags ex: <nowiki><input id='checkbox_id1' > & <select id="select_id1"></nowiki> | * parallel naming rules for html elemnt tags ex: (1)<nowiki><input id='checkbox_id1' > & <select id="select_id1"></nowiki> (2)Replace the input id to select id. Code snippet as follows: | ||
<pre> | |||
var selectId = inputId.replace("checkbox_", "select_"); | |||
</pre> | |||
== Create HTML select option == | |||
[http://www.w3schools.com/tags/att_select_form.asp HTML select form Attribute] | [http://www.w3schools.com/tags/att_select_form.asp HTML select form Attribute] | ||
* [http://stackoverflow.com/questions/9071525/how-to-create-html-select-option-from-json-hash javascript - How to create HTML select option from JSON hash? - Stack Overflow] | * from JSON hash: [http://stackoverflow.com/questions/9071525/how-to-create-html-select-option-from-json-hash javascript - How to create HTML select option from JSON hash? - Stack Overflow] | ||
* [http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array JavaScript - populate drop down list with array - Stack Overflow] | * from javascript array: [http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array JavaScript - populate drop down list with array - Stack Overflow] | ||
== Display or hide the element by id == | |||
* [http://www.w3schools.com/jsref/dom_obj_style.asp HTML DOM Style object] | * [http://www.w3schools.com/jsref/dom_obj_style.asp HTML DOM Style object] | ||
** <nowiki>document.getElementById( selector_id ).style.display = "none";</nowiki> | ** <nowiki>document.getElementById( selector_id ).style.display = "none";</nowiki> | ||
Revision as of 03:19, 16 February 2013
Javascript approaches to do the same task
Get the document by id
- document.getElementById('abcId')
- alternative: (1) Get the id attribute by using jQuery attr(): $("selector").attr("id");[1] (example) and (2) go to the first step
- parallel naming rules for html elemnt tags ex: (1)<input id='checkbox_id1' > & <select id="select_id1"> (2)Replace the input id to select id. Code snippet as follows:
var selectId = inputId.replace("checkbox_", "select_");
Create HTML select option
- from JSON hash: javascript - How to create HTML select option from JSON hash? - Stack Overflow
- from javascript array: JavaScript - populate drop down list with array - Stack Overflow
Display or hide the element by id
- HTML DOM Style object
- document.getElementById( selector_id ).style.display = "none";
- Using jQuery .show() or .hide():
- $("#selector_id").show(); or
- $("#selector_id").hide();
- Using jQuery .css():
- $("#selector_id").css("display", ""); or $("#selector_id").css("display", "block");
- $("#selector_id").css("display", "none");