Display Selected Country drop-down list using JavaScript

vijayrami May 07, 2018 
<!DOCTYPE html>
<html>
 <head>
  <script language="Javascript">
    function Displayalllist() {
        var x = document.getElementById("countrylist");
        var txt = "Your Selected Country : ";
        var i;
        var selected = x.options[x.selectedIndex];
        
        for (i = 0; i < x.length; i++) {
         if (selected.value == ''){
          
         } else {
          txt = txt + "<br/>" + selected.text;
         }
            
        }
        document.getElementById("result").innerHTML = txt;
    }
    function myChangeFunction() {
        var selectcountryvalue = document.getElementById("countrylist").value;
        if (selectcountryvalue == ""){
         var getx = document.getElementById("countrylist");
         var txt = "Your Selected Country : ";
         var i;
         for (i = 0; i < getx.length; i++) {
          if (getx.options[i].value == ''){
           
          } else {
           txt = txt + "<br/>" + getx.options[i].text;
          }
             
         }
         document.getElementById("result").innerHTML = txt;
        } else {
         var selectcountry = countrylist.options[countrylist.selectedIndex].text;
         document.getElementById("result").innerHTML = "Your Selected Country : " + selectcountry;
        }
        
    }
  </script>
 </head>
 <body onload="Displayalllist();">
  <div id="country-options">
  <select id="countrylist" onchange="myChangeFunction(this)">
    <option value="">Please Select</option>
    <option value="1">India</option>
    <option value="2">United Kingdom</option>
    <option value="3">United States</option>
    <option value="4">China</option>
    <option value="5">Brazil</option>
  </select>
  </div>
  <p id="result"></p>
 </body>
</html>
Tags

Post a Comment

0 Comments