Day of week Drop Downs

jeffbarclay · November 12th, 2003, 03:41 PM

I am look for code (VBScript or JavaScript) to give 7 drop downs to select a different day of the week from each one. When you select "Monday" from the first drop down, "Monday" is not available in the rest of the drop downs, and so on...

I have a sample one, but only works with 2 drop downs...

Any help would be grateful!

Jeff

joefawcett · November 13th, 2003, 06:34 AM

It's fairly straightforward but why not have one list box with two arrows for moving days up or down? It would take up a lot less room.

--

Joe

joefawcett · November 13th, 2003, 01:22 PM

And here's two solutions in one page, one uses the method above, the other adds the days to a textarea when you double click on an option.

Code:

<html>
  <head>
    <title>Ordered List</title>
   
    <script type="text/javascript">

      var arrWeekdays = [{"text": "Sunday", "value": 0},
                         {"text": "Monday", "value": 1},
                         {"text": "Tuesday", "value": 2},
                         {"text": "Wednesday", "value": 3},
                         {"text": "Thursday", "value": 4},
                         {"text": "Friday", "value": 5},
                         {"text": "Saturday", "value": 6}
                        ];

      function moveItem(ListboxId, Direction)
      {
        var iSwapIndex = (Direction == "up" ? -1 : 1);
        var oLst = document.getElementById(ListboxId);
        var colOptions = oLst.options;
        var iSelectedIndex = oLst.selectedIndex;
        if (iSelectedIndex == -1) return; 
        var oOption = colOptions[iSelectedIndex];
        if (Direction.toLowerCase() == "up" && oOption.index == 0) return;
        if (Direction.toLowerCase() == "down" && oOption.index == (oLst.options.length - 1)) return;
        var oTempOption = new Option(oOption.text, oOption.value);
        var oSwapWithOption = colOptions[iSelectedIndex + iSwapIndex];
        oOption.text = oSwapWithOption.text;
        oOption.value = oSwapWithOption.value;
        oSwapWithOption.text = oTempOption.text;
        oSwapWithOption.value = oTempOption.value;
        oSwapWithOption.selected = true;
      }
      
      function populateList(ListboxId, Data)
      {
        var oLst = document.getElementById(ListboxId);
        oLst.options.length = 0;
        for (var i = 0; i < Data.length; i++)
        {
          var oOption = new Option(Data[i].text, Data[i].value);
          oLst.options.add(oOption);
        }
        oLst.options[0].selected = true;
        oLst.size = Data.length;
      }
      
      function addToTextArea(Option)
      {
        if (Option.disabled) return;
        Option.disabled = true;
        var oText = document.getElementById("txtSortedList");
        oText.value += Option.text + "\n";
      }
      
      function reset()
      {
        init();
        var oText = document.getElementById("txtSortedList");
        oText.value = "";
      }
      function init()
      {
        populateList("lstWeekdays", arrWeekdays);
      }
      
    </script>
  </head>
  <body onload="init();">
  <table align="left" width="60%" border="0">
  <tbody>
    <tr><td rowspan="2" align="right" width="50%">
    <select id="lstWeekDays" ondblclick="addToTextArea(this.options[this.selectedIndex]);">
    </select></td>
  <td width="*" align="left"><input type="button" value="^" onclick="moveItem('lstWeekdays', 'up');"></td></tr>
  <tr><td align="left"><input type="button" value="v" onclick="moveItem('lstWeekdays', 'down');"></td></tr>
  <tr><td align="right"><textarea readonly style="overflow:hidden" rows="7" cols="12" id="txtSortedList"></textarea></td>
  <td><input type="button" value="Reset" onclick="reset();"></td></tr>
  </tbody>
  </table>
  
  </body>
</html>

--

Joe

jeffbarclay · November 14th, 2003, 11:14 PM

Joe,

Thanks for the code! My page needs to have seven text/dropdown boxes that must all be filled with different days of the week. No two can be the same. This is transferred to a DB for sorting. This is all done in one submit. The method you suggested would not do this.

Thanks for the suggestion though!

Jeff

joefawcett · November 15th, 2003, 05:52 AM

With a small addition it would. How does the receiving page need the data, seven differently named items?

--

Joe

jeffbarclay · November 17th, 2003, 08:28 PM

Yes, need 7 drop downs, but I need the selections to drop off as they are selected the the last drop down only has one selection...

Jeff