Need one <select> option to interact with another <select>

Question

stangn99 0 Light Poster

13 Years Ago

Hey guys,
I'm hoping this isn't anything complicated. I don't know any javascript, but I think it can be done with it.

Basically what I need is on select option to change the value of another selection option. More specifically:

when a user selects a time from the first option, I want the second option to automatically add one hour to the next drop down option. For this example, if the user selects 9:00 from the first drop down list, I want the second drop down list to auto change its value to 10:00

[B]TIME FROM[/B]
<select>
   <option>7:00</option>
   <option>8:00</option>
   [B]<option>9:00</option>[/B]
   <option>10:00</option>
   <option>11:00</option>
   <option>12:00</option>

[B]TIME FROM[/B]
<select>
   <option>7:00</option>
   <option>8:00</option>
   <option>9:00</option>
  [B] <option>10:00</option>[/B] automatically change to add ONE HOUR after the initial selection. 
   <option>11:00</option>
   <option>12:00</option>

Is this something that can be done easily with Javascript?

Any help is greatly appreciated.

Thank you

javascript

2 Contributors
4 Replies
119 Views
11 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by stangn99

Taywin 312 Posting Virtuoso

13 Years Ago

Yes.

<html>
<head>
  <script type="text/javascript">
  function checkSel2(sel1Obj, sel2Id) {
    var sel2Obj = document.getElementById(sel2Id)
    if (sel1Obj && sel2Obj) {  // loosely check for existence
      if (sel2Obj.selectedIndex<=sel1Obj.selectedIndex &&
          sel1Obj.value<16) {  // not at the last option
        sel2Obj.selectedIndex = sel1Obj.selectedIndex+1
      }
      else if (sel1Obj.value==16) {  // last option in select
        sel2Obj.selectedIndex = sel1Obj.selectedIndex
      }
    }
  }
  </script>
</head>

<body>
  <select id="sel1" onchange="checkSel2(this, 'sel2'">
  <option value=7>7:00am</option>
  <option value=8>8:00am</option>
  <option value=9>9:00am</option>
  <option value=10>10:00am</option>
  <option value=11>11:00am</option>
  <option value=12>12:00pm</option>
  <option value=13>1:00pm</option>
  <option value=14>2:00pm</option>
  <option value=15>3:00pm</option>
  <option value=16>4:00pm</option>
  </select>

  <select id="sel2">
  <option value=7>7:00am</option>
  <option value=8>8:00am</option>
  <option value=9>9:00am</option>
  <option value=10>10:00am</option>
  <option value=11>11:00am</option>
  <option value=12>12:00pm</option>
  <option value=13>1:00pm</option>
  <option value=14>2:00pm</option>
  <option value=15>3:00pm</option>
  <option value=16>4:00pm</option>
  </select>
</body>
</html>

Edited 13 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

stangn99 0 Light Poster · Answer 1 · 2011-10-27T00:38:33+00:00

Yes.

<html>
<head>
  <script type="text/javascript">
  function checkSel2(sel1Obj, sel2Id) {
    var sel2Obj = document.getElementById(sel2Id)
    if (sel1Obj && sel2Obj) {  // loosely check for existence
      if (sel2Obj.selectedIndex<=sel1Obj.selectedIndex &&
          sel1Obj.value<16) {  // not at the last option
        sel2Obj.selectedIndex = sel1Obj.selectedIndex+1
      }
      else if (sel1Obj.value==16) {  // last option in select
        sel2Obj.selectedIndex = sel1Obj.selectedIndex
      }
    }
  }
  </script>
</head>

<body>
  <select id="sel1" onchange="checkSel2(this, 'sel2'">
  <option value=7>7:00am</option>
  <option value=8>8:00am</option>
  <option value=9>9:00am</option>
  <option value=10>10:00am</option>
  <option value=11>11:00am</option>
  <option value=12>12:00pm</option>
  <option value=13>1:00pm</option>
  <option value=14>2:00pm</option>
  <option value=15>3:00pm</option>
  <option value=16>4:00pm</option>
  </select>

  <select id="sel2">
  <option value=7>7:00am</option>
  <option value=8>8:00am</option>
  <option value=9>9:00am</option>
  <option value=10>10:00am</option>
  <option value=11>11:00am</option>
  <option value=12>12:00pm</option>
  <option value=13>1:00pm</option>
  <option value=14>2:00pm</option>
  <option value=15>3:00pm</option>
  <option value=16>4:00pm</option>
  </select>
</body>
</html>

That was fast!
Thank you very much for the assistance. However, the code above does not seem to work. When I select the first option, nothing happens to the second option.

Thanks again!

Taywin 312 Posting Virtuoso · Answer 2 · 2011-10-27T00:52:05+00:00

Sorry, at line 20 is missing ")" and should be

<select id="sel1" onchange="checkSel2(this, 'sel2')">

stangn99 0 Light Poster · Answer 3 · 2011-10-27T01:03:33+00:00

Sorry, at line 20 is missing ")" and should be
<select id="sel1" onchange="checkSel2(this, 'sel2')">

I think I love you.

Thank you very much. I've been trying to figure this out for 2 days now and finally gave in. This is beautiful.