JavaScript controls HTML tags

Almost all HTML tags can be described as HTML controls, such as SELECT, input, div, table, etc.

• Populate the drop-down list

 _showSchools: function (data) { //data represents a data object

 var mySelect = document.getElementById("selectSchools"); // Get the dropdown box
mySelect.options.length = 0;
// Add option to the select tag
for (var index in data) {
    var item = data[index];
    var opp = new Option(item.SchoolName, item.name);  
    // The first parameter represents the content displayed in the drop-down box, and the second parameter represents the content selected in the drop-down box
    opp.name = "option"+ index; mySelect.add(opp); }},Copy the code

• Get the contents of the drop-down list

var schoolId = document.getElementById("selectSchools").value;

// Below is the selected display of the drop-down box
function on_idmbzd_change(){ 
    var sel_obj=document.getElementById("idMbzd");
    var index=sel_obj.selectedIndex;
    alert(sel_obj.options[index].value);
    alert(sel_obj.options[index].text);
}
Copy the code

• Radio button to get the content

var chkObjs = document.getElementsByName("radio");
var checkvalue = null;
for (var i = 0; i < chkObjs.length; i++) {
    if (chkObjs[i].checked) {
    checkvalue = parseInt(chkObjs[i].value); }}Copy the code

• Radio button Settings

if (entity.SelectType == 1) document.getElementById("SelectType").checked = true;
if (entity.SelectType == 0) document.getElementById("UnSelectType").checked = true;
Copy the code

• Multi-check box Settings

setCheckBox: function (data) {
    var courseList = document.getElementsByName("CourseList");
    for (var i = 0; i < courseList.length - 1; i++) {
        if (courseList[i].value==data) {
            courseList[i].checked=true; }}},Copy the code

• Controls the display and hiding of HTML elements

Method one:

document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";
Copy the code

Using the above method to achieve hiding, the location of the page is also occupied by the control, display blank.

Method 2:

document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";
Copy the code

After hiding using the above method, the location of the page is not occupied.