Home > Developer > Web Develop
In web programming, we typically encounter situations where you want to dynamically modify select and checkbox, which is generally not clearly documented in tutorials or books. I have summed up the following experience through practice. First, to facilitate the selection of select and CheckBox values, the same name is usually used as follows:
1 <Selectname= "Test_select"ID= "Test_select">2 <optionvalue= "1">1</option>3 <optionvalue= "2">2</option>4 </Select>
1 <inputtype= "checkbox"name= "Test_checkbox"value= "Test1"/>test12 <inputtype= "checkbox"name= "Test_checkbox"value= "Test2"/>test23 <inputtype= "checkbox"name= "Test_checkbox"value= "Test3"/>Test3
This allows the array of results to be obtained by obtaining a name for a series of checkboxes. Here's what we'll talk about.
1.select1.1 Dynamic Add optionSometimes we don't know all the option values from the beginning, so we can add the options dynamically via JS.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Index.html</title>5 6 <Metahttp-equiv= "keywords"content= "Keyword1,keyword2,keyword3">7 <Metahttp-equiv= "description"content= "This is my page">8 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">9 Ten <!--<link rel= "stylesheet" type= "Text/css" href= "./styles.css" > - One <Script> A functioninit () { - varsel=document.getElementById ("Test_select"); - Sel.options.add (NewOption ("haha","hehe")); the } - </Script> - </Head> - + <Bodyonload= "init ()"> -This is my HTML page.<BR> + <SelectID= "Test_select"> A <optionvalue= "Select1">1</option> at <optionvalue= "Select2">2</option> - </Select> - - </Body> - </HTML>
The above can be dynamically added by the. Option.add function.
The following is to avoid redundancy the code we call specifically refers to the operation of the OnLoad function.
In addition, we can add option by adding DOM elements directly, noting that option's display text is controlled by the label property. This method is more suitable for fully auto-generated pages, because his structure can be defined by the parameters passed in.
1 <Script>2 functioninit () {3 varsel=document.getElementById ("Test_select");4 varTest=Document.createelement ("option");5 Test.setattribute ("value", "haha");6 Test.setattribute ("label", "hehe");7 sel.appendchild (test);8 }9 </Script>1.2 Dynamic Delete option
Delete option can remove option directly from the options remove method, but it should be noted that this index is the top-down position of option and is calculated starting at 0.
1 <Script>2 functioninit () {3 varsel=document.getElementById ("Test_select");4 varDeleteindex= 1; //This is usually a parameter which are given by others.5 Sel.options.remove (deleteindex);6 }7 </Script>View Code
In addition, we can also use the DOM element method RemoveChild Delete, the method is basically the same, just note that the parameter is DOM node, and there is space subtree, in the subtree should be noted.
1.3 Dynamic Modification optionThe simple change is to find the option to use the SetAttribute method settings.
1.4 Initialization of selected valuesMost of the time we want the initial select to be the option we want to see selected. In this case, we need
JS dynamic Modify Select and checkbox
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
