Home > Developer > JavaScript
Drop-down list in our daily web browsing process, everywhere, is a web programming process is very familiar with a page element, with the increasingly powerful HTML language, its in the hands of the vast siege lion is changeable, there are many different ways of implementation. This article mainly in the general Select drop-down list to tell the general operation of the drop-down list, in which DataList is a small extension of this article, but also as a simple drop-down list, unfortunately, ie 9 and earlier versions of IE browser and Safari does not support DataList standard Sign, which is mainly used for input or search text auto-completion function, etc., interested in the pro can be explored in detail, no longer repeat. Thank you!
Small two on the code, you crossing, please see, the niche has a gift ...
The following is the corresponding HTML source code:
1 <HTML>2 <Head>3 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">4 5 <title>Js-005-javascript Operations Common web element Five-common drop-down list Select and DataList</title>6 </Head>7 8 <Body>9 <Div>Ten <h4ID= "P1">Drop-down list: Select</h4> One A <ul> - <Li>Set whether checked: Optionobject.selected=true|false</Li> - <Li>Return to selected state: optionobject.selected</Li> the </ul> - - <inputID= "SEL"type= "text"> - + <Selectclass= "SEL"onchange= "Selchange ();"> - <optionvalue= "1" >Shandong</option> + <optionvalue= "2" >Shanghai</option> A <optionvalue= "3" >Jiangsu</option> at </Select> - </Div> - - <formAction= "form.php"Method= "Get"> - <h4ID= "P1">Drop-down list: DataList</h4> - in <ul> - <Li>DataList describes its possible values</Li> to <Li><DataList>The label stipulates<Input>the list of possible options for the element. + <Li> <DataList>The label is used to<Input>Element provides an "auto-complete" feature. The user can see a drop-down list in which the options are pre-defined and will be used as input data for the user.</Li> - <Li>Please use<Input>Element's List property to bind<DataList>Elements.</Li> the <Li>Note: IE 9 and earlier versions of IE browser and Safari do not support DataList tags</Li> * </ul> $ Panax Notoginseng <inputList= "Browsers"name= "Browser"> - the <DataListID= "Browsers"> + <optionvalue= "Internet Explorer"> A <optionvalue= "Firefox"> the <optionvalue= "Chrome"> + <optionvalue= "Color"> - <optionvalue= "Opera"> $ <optionvalue= "Safari"> $ </DataList> - - <inputtype= "Submit"> the </form> - Wuyi <Div> the <BR><BR><BR><BR> - <ahref= "Http://www.w3school.com.cn/jsref/dom_obj_style.asp"Target= "_blank">HTML DOM Style Object</a> Wu </Div> - </Body> About </HTML>
The JS function selchange () corresponding to the above HTML source code call is as follows:
The PHP file corresponding to the above HTML source code form.php is as follows:
The following is the corresponding Web page display:
At this point, js-005-javascript Operations Common web elements of the five-common drop-down list Select and DataList successfully concluded, I hope this article can give beginners JavaScript you a reference.
Finally, very grateful to the pro-stop, I hope this article can be pro helpful. Warmly welcome the kiss to discuss together and progress together. Thank you so much! ^_^
Js-005-javascript Operations Common web element Five-common drop-down list Select and DataList
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
