Indian states drop down / Indian states / list of indian states

<select name="zone_id" id="input-zone" class="form-control"><option value=""> --- Please Select --- </option><option value="1475">Andaman and Nicobar Islands</option><option value="1476">Andhra Pradesh</option><option value="1477">Arunachal Pradesh</option><option value="1478">Assam</option><

option value="1479">Bihar</option><option value="1480">Chandigarh</option><option value="1481">Dadra and Nagar Haveli</option><option value="1482">Daman and Diu</option><option value="1483">Delhi</option><option value="1484">Goa</option><option value="1485">Gujarat</option><option value="1486">Haryana</option><option value="1487">Himachal Pradesh</option><option value="1488">Jammu and Kashmir</option><option value="1489">Karnataka</option><option value="1490">Kerala</option><option value="1491">Lakshadweep Islands</option><option value="1492">Madhya Pradesh</option><option value="1493">Maharashtra</option><option value="1494">Manipur</option><option value="1495">Meghalaya</option><option value="1496">Mizoram</option><option value="1497">Nagaland</option><option value="1498">Orissa</option><option value="1499">Pondicherry</option><option value="1500">Punjab</option><option value="1501">Rajasthan</option><option value="1502">Sikkim</option><option value="1503">Tamil Nadu</option>

<option value="2000">Telangana</option>

<option value="1504">Tripura</option><option value="1505">Uttar Pradesh</option><option value="1506">West Bengal</option></select>

Icons / PNG Icons / Delete / Edit / Add Icons / Transparent Icons

Onclick show / hide divs and add / Remove Class for tab colors

Onclick show / hide divs and add / Remove Class for tab colors




<script src="getfile path........jquery-2.1.1.min.js"></script>
<style>
.active{ color:red;}</style>
<script>

$(document).ready( function() {
  $("#searchcarttext").click(function(){
     
         $("#newcart2").hide();
          $("#searchcart2").show();  
           $(".cartpop a.active").removeClass('active');  
           $(this ).addClass('active');
    });
} );


$(document).ready( function() {
  $("#newcarttext").click(function(){
      
         $("#newcart2").show();
          $("#searchcart2").hide();
       $(".cartpop a.active").removeClass('active');  
          $(this).addClass('active');
    });
} );

</script>


<div class="row modal-header " style="margin-bottom:18px; line-height: 25px; padding: 4px; font-weight: bold; font-size: 16px; display:none;">Cart Details</div>


<div class="row cartpop"><a href="#" class="active"  onclick="newcart();" id="newcarttext"><i class="glyphicon glyphicon-shopping-cart"></i>New&nbsp;User</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="searchcart();" id="searchcarttext"><i class="glyphicon glyphicon-search"></i>Search Old Cart</a></div>
 <div class="row" id="newcart2">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
              <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Customer Name</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Customer Name" id="customer_name_cart" name="customer_name_cart"  autocomplete="off"  class="form-control"></div>
  
  
    </div></div>
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>

<div class="row" id="searchcart2" style="display:none;">
   
      <div class="col-md-12 col-lg-12   col-sm-12 col-xs-12">
          
             <div class="row">
               
    <div class="form-group">    
            <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
            <label>Mobile Number</label></div>
      
     <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12 form-group">
       
         <input type="text" placeholder="Mobile Number" id="mobile_number_cart" name="mobile_number_cart" onkeypress="return isNumberKey(event)" autocomplete="off" maxlength="10" class="form-control"></div>
  
  
    </div></div>
             
             <div class="row">
        <div class="col-md-6 col-md-offset-6 col-lg-6 col-lg-offset-6  col-sm-12 col-xs-12   form-group">
            <input type="button" name="getotp_btn" value="Continue Selling" class="btn btn-default Ipay_btn2" onclick="checkreg()"></div>
    </div></div>
</div>





</div>

Onclick addClass and removeClass - with Jquery

  <style>
  p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }

  .active{color:#fff; background:red; padding:5px;}
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>



<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>

  <script>
$("p").click(function() {
      $("p.active").removeClass('active');
  $( this ).addClass('active');
});
</script>

Onselect whileloop, while loop in javascript

<script>
function whileloop() {
 var limitvalue=document.getElementById("limitvalue").value;
 var text = "";
 var i = 1;
 while (i <= limitvalue) {
text += "<br>The number is " + i;
        i++;
    }
    document.getElementById("demo").innerHTML = text;
if(limitvalue.value=='') // use length or value
alert('invalid')
  }
</script>



<h2>Onchange whileloop will work</h2>
<select id='limitvalue' name='limitvalue' onChange="whileloop();">
   <option selected value="0"  >Select</option>
<option>1</option>
   <option>2</option>
   <option>3</option>
<option>4</option>
<option>5</option>
</select>
<p id="demo"></p>

Onchange select box option function will work, alert on change option,javascript on change function

Example : User will select then it will work,
Onchange function


    <script>
     function jsfunction(){
         var city=document.getElementById('city').value;
      alert(city);
       }
     </script>
  

    <select id="city" onchange="jsfunction()">
    <option value="Hyderabad">Hyderabad</option>
    <option value="Banglore">Banglore</option>
      <option value="Delhi">Delhi</option>
   <option value="KalKatta">KalKatta</option>
     </select>

Social icons code / Add social icons for your website pages / social network pages icons

Notes : upload & change spacer image path and social networking icons file path

css code paste internal css or external file & HTML code paste where you want display icons, as requirement change background positions

CSS 

.fb {
    background-image: url("http://filepath/social-icons2.png");
    background-position: 95px -211px;
    margin-right: 3px;
    width: 36px;
}
.gplus{
    background-image: url("http://filepath/social-icons2.png");
    background-position: 218px -211px;
    margin-right: 3px;
    width: 36px;
}
.youtube {
    background-image: url("http://filepath/social-icons2.png");
    background-position: 259px -211px;
    margin-right: 3px;
    width: 36px;
}

.linkdin {
      background-image: url("http://filepath/social-icons2.png");
    background-position: 53px -211px;
    margin-right: 3px;
    width: 36px;
}
.twitter {
       background-image: url("http://filepath/social-icons2.png");
    background-position: -211px -211px;
    margin-right: 3px;
    width: 36px;
}

.pinster{
       background-image: url("http://filepath/social-icons2.png");
    background-position: 135px -211px;
    margin-right: 3px;
    width: 36px;
}

HTML

<a href="https://www.facebook.com/oceansltd" target="_blank"><img class="fb" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>

<a href="https://plus.google.com/u/0/115275724818781182324/posts?hl=en" target="_blank"><img class="gplus" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>

<a href="https://twitter.com/oceansltdsa" target="_blank"><img class="twitter" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>

<a href="https://www.linkedin.com/in/oceansltd" target="_blank"><img class="linkdin" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>

<a href="https://www.pinterest.com/oceansltdsa/" target="_blank"><img class="pinster" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>

<a href="https://www.youtube.com/channel/UCEW_WuQwcu4qVdsU5cO6-Ig" target="_blank"><img class="youtube" alt="" src="http://oceans-ltd.com/wp-content/uploads/2015/03/spacer.gif"></a>