Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
  
  <select class="start_time">
    
    <option value="1">00:00</option>
        <option value="2">00:30</option>
        <option value="3">01:00</option>
        <option value="4">01:30</option>
        <option value="5">02:00</option>
        <option value="6">02:30</option>
        <option value="1">03:00</option>
        <option value="2">03:30</option>
        <option value="3">04:00</option>
        <option value="4">04:30</option>
        <option value="5">05:00</option>
        <option value="6">05:30</option>
        <option value="1">06:00</option>
        <option value="2">06:30</option>
        <option value="3">07:00</option>
        <option value="4">07:30</option>
        <option value="5">08:00</option>
        <option value="6">08:30</option>
        <option value="1">09:00</option>   
        <option value="2">09:30</option>
        <option value="3">10:00</option>
        <option value="4">10:30</option>
        <option value="5">11:00</option>
        <option value="6">11:30</option>
    <option value="1">12:00</option>
        <option value="2">12:30</option>
        <option value="3">01:00pm</option>
        <option value="4">01:30pm</option>
        <option value="5">02:00pm</option>
        <option value="6">02:30pm</option>
        <option value="1">03:00pm</option>
        <option value="2">03:30pm</option>
        <option value="3">04:00pm</option>
        <option value="4">04:3pm0</option>
        <option value="5">05:00pm</option>
        <option value="6">05:30pm</option>
        <option value="1">06:00</option>
        <option value="2">06:30pm</option>
        <option value="3">07:00</option>
        <option value="4">07:30</option>
        <option value="5">08:00</option>
        <option value="6">08:30</option>
        <option value="1">09:00</option>   
        <option value="2">09:30</option>
        <option value="3">10:00</option>
        <option value="4">10:30</option>
        <option value="5">11:00</option>
        <option value="1130pm">11:30pm</option>
  </select>
  
  
  <BR><BR>
  
  <select class="end_time">
      <option value="1">00:00</option>
        <option value="2">00:30</option>
        <option value="3">01:00</option>
        <option value="4">01:30</option>
        <option value="5">02:00</option>
        <option value="6">02:30</option>
        <option value="1">03:00</option>
        <option value="2">03:30</option>
        <option value="3">04:00</option>
        <option value="4">04:30</option>
        <option value="5">05:00</option>
        <option value="6">05:30</option>
        <option value="1">06:00</option>
        <option value="2">06:30</option>
        <option value="3">07:00</option>
        <option value="4">07:30</option>
        <option value="5">08:00</option>
        <option value="6">08:30</option>
        <option value="1">09:00</option>   
        <option value="2">09:30</option>
        <option value="3">10:00</option>
        <option value="4">10:30</option>
        <option value="5">11:00</option>
        <option value="6">11:30</option>
    <option value="1">12:00</option>
        <option value="2">12:30</option>
        <option value="3">01:00pm</option>
        <option value="4">01:30pm</option>
        <option value="5">02:00pm</option>
        <option value="6">02:30pm</option>
        <option value="1">03:00pm</option>
        <option value="2">03:30pm</option>
        <option value="3">04:00pm</option>
        <option value="4">04:3pm0</option>
        <option value="5">05:00pm</option>
        <option value="6">05:30pm</option>
        <option value="1">06:00</option>
        <option value="2">06:30pm</option>
        <option value="3">07:00</option>
        <option value="4">07:30</option>
        <option value="5">08:00</option>
        <option value="6">08:30</option>
        <option value="1">09:00</option>   
        <option value="2">09:30</option>
        <option value="3">10:00</option>
        <option value="4">10:30</option>
        <option value="5">11:00</option>
        <option value="1130pm">11:30pm</option>
  </select>
</body>
</html>
 
​
 
 $(".start_time").change(function(){
            var sel =$(this).attr('selectedIndex');
            if(sel>=46) //46 is 23:00, 47 is 23:30
            {
                sel = sel-48;  //kick back to -2 or -1
            }
            var endIdx = sel+2;
            $(".end_time").attr('selectedIndex', endIdx);        
    });
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers