Home » »Unlabelled » What is onchage button in Html using Scripting Language(use countrys,States,Districts)

What is onchage button in Html using Scripting Language(use countrys,States,Districts)

on 08:30

Html:Html is a Hypher Text Markup Language.It is a Error Free language.This is a Tag based Language.The text between <html> and </html> describes the web page and body between the <body> and </Body>.It is aalso called as Webpages.

Script: scripting is a Client side programing validation.Using Simply scripting am developing this Form.

Step 1:open the notepad and write the code and save it as countrystates.jsp(html)

<script>
    function fun(){
        a=document.getElementById('sel1').value;
        b=document.getElementById(a).innerHTML;

        c=document.getElementById('sp1').innerHTML=b;

    }
    function fun1(){
         a=document.getElementById('sel2').value;
         b=document.getElementById(a).innerHTML;
         c=document.getElementById('sp2').innerHTML=b;

    }

    function fun2(){
         a=document.getElementById('sel3').value;
         b=document.getElementById(a).innerHTML;
         c=document.getElementById('sp2').innerHTML=b;

    }
</script>

<style>
    select{
        width:200;
        height:25;
        color:greenyellow;
        background-color: blue;
    }
</style>
Country
<select onchange="fun()" id="sel1">
    <option>SELECT</option>
        <option> INDIA </option>
        <option>US</option>
        <option>NewYork</option>
</select>
<br/>
<br/>
<br/>
States   <span id="sp1"></span>
<br/>
</br>
</br>

<div id='INDIA' style="display:none" >
    <select id="sel2" onchange="fun1()">
        <option>SELECT</option>
    <option>AndhraPradesh </option>
    <option>Karnataka</option>
    </select>
</div>

<div id='NewYork' style="display:none" >
    <select>
        <option>SELECT</option>
    <option>NewYork-1</option>
    <option>New Jersy</option>
    </select>
</div>

<div id='US' style="display:none">
    <select id="sel3" onchange="fun2()">
        <option>SELECT</option>
    <option>Washington</option>
    <option>LosE</option>
    </select>
</div>
Districts <span id="sp2"></span>
<br><br><br>

<div id='AndhraPradesh' style="display:none" >
    <select>
        <option>SELECT</option>
    <option>Krishna </option>
    <option>West Godavari</option>
    <option>Medak</option>
    </select>
</div>

<div id='Karnataka' style="display:none" >
    <select>
        <option>SELECT</option>
    <option>Bangalore </option>
    <option>Belgum</option>
    <option>Mysore</option>
    </select>
</div>

<div id='Washington' style="display:none" >
    <select>
        <option>SELECT</option>
    <option>wash-1</option>
    <option>wash-2</option>
    <option>wash-3</option>
    </select>
</div>

<div id='LosE' style="display:none" >
    <select>
        <option>SELECT</option>
    <option>lose-1</option>
    <option>lose-2</option>
    <option>lose-3</option>
    </select>
</div>

Step2:Later Goto Browser and run(html) or jsp Goto Server and run jsp in Browser also.below mentioned screen shot see.

Step 3:Next,select any Country we can get That country related States only below mentioned Diagram

Step 4: Next select any one state we can get only that state related Districts only.Below mentioned diagram see..

Hi Frds,i am posting a programs and documents are mainly used for my Projects.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)