Two (pulldown) lists

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Francois
    #1

    Two (pulldown) lists

    Hi,

    In my form I want people to be able to select a startingpoint (month)
    and then an endingpoint (month). I can make one list with all te
    possible months, and another with again all possible months, but in
    that way it is possible to select (i.e.) from june2003 to
    february2003.

    To make that (reverse) selection impossible, the options in the second
    list should change when the user selects a month in the first list.

    Example:

    First list (From): (last month is automaticly deleted by cgi-script)
    January
    February
    March
    April
    May

    Second list (To): (first month is automaticly deleted by cgi-script)
    February
    March
    April
    May
    June

    The user selects 'March' in the first list.
    The only options in the second list should be:
    April
    May
    June

    Can anyone tell me how to do this? I think a javascript would be best
    for this...
    PS If neccessary, the cgi-script to delete the first month of the
    second list is ajustable.

    The code I have now:

    From:
    <select name="form_peri od_begin" id="form_period _begin">
    <option value='101>2003 ' selected>jan03</option>
    <option value='102>2003 '>feb03</option>
    <option value='103>2003 '>mrc03</option>
    <option value='104>2003 '>apr03</option>
    <option value='105>2003 '>may03</option>
    </select><br>

    To:
    <select name="form_peri od_end" id="form_period _end">
    <option value='102>2003 '>feb03</option>
    <option value='103>2003 '>mrc03</option>
    <option value='104>2003 '>apr03</option>
    <option value='105>2003 '>may03</option>
    <option value='106>2003 ' selected>jun03</option>
    </select>
    Tags: None
    • Stuart Palmer
      #2
      Re: Two (pulldown) lists

      Look up 'new option' and a related post called 'simple HTML issue' it may
      help.
      You may need to null 2nd drop down and create new options for the remaining
      months.

      Stu

      "Francois" <google@francoi ssachs.nl> wrote in message
      news:16ccb02.03 10230013.35177d f4@posting.goog le.com...[color=blue]
      > Hi,
      >
      > In my form I want people to be able to select a startingpoint (month)
      > and then an endingpoint (month). I can make one list with all te
      > possible months, and another with again all possible months, but in
      > that way it is possible to select (i.e.) from june2003 to
      > february2003.
      >
      > To make that (reverse) selection impossible, the options in the second
      > list should change when the user selects a month in the first list.
      >
      > Example:
      >
      > First list (From): (last month is automaticly deleted by cgi-script)
      > January
      > February
      > March
      > April
      > May
      >
      > Second list (To): (first month is automaticly deleted by cgi-script)
      > February
      > March
      > April
      > May
      > June
      >
      > The user selects 'March' in the first list.
      > The only options in the second list should be:
      > April
      > May
      > June
      >
      > Can anyone tell me how to do this? I think a javascript would be best
      > for this...
      > PS If neccessary, the cgi-script to delete the first month of the
      > second list is ajustable.
      >
      > The code I have now:
      >
      > From:
      > <select name="form_peri od_begin" id="form_period _begin">
      > <option value='101>2003 ' selected>jan03</option>
      > <option value='102>2003 '>feb03</option>
      > <option value='103>2003 '>mrc03</option>
      > <option value='104>2003 '>apr03</option>
      > <option value='105>2003 '>may03</option>
      > </select><br>
      >
      > To:
      > <select name="form_peri od_end" id="form_period _end">
      > <option value='102>2003 '>feb03</option>
      > <option value='103>2003 '>mrc03</option>
      > <option value='104>2003 '>apr03</option>
      > <option value='105>2003 '>may03</option>
      > <option value='106>2003 ' selected>jun03</option>
      > </select>[/color]


        Comment

        • Francois
          #3
          Re: Two (pulldown) lists

          With help from some postings and some sites I made this script.
          Anyone can improve this?

          <html>
          <head>
          <title>Test</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <script language="JavaS cript" type="text/javascript">
          var JSmaanden = new Array("jan03"," feb03","mrt03", "apr03","mei03" ,"jun03");
          var JSdatums = new
          Array("101>2003 ","102>2003","1 03>2003","104>2 003","105>2003" ,"106>2003") ;

          function selecter(){
          document.formul ier.form_period e_eind.selected Index =
          document.formul ier.form_period e_eind.options. length-1;
          }

          function changelist2(beg in) {
          document.formul ier.form_period e_eind.options. length = 0;
          beginmaand = begin.options[begin.selectedI ndex].value
          mstatus="inacti ve";
          for (i=0; i<JSmaanden.len gth; i++) {
          if (mstatus == "active") {
          document.formul ier.form_period e_eind.add(new Option(JSmaande n[i],
          JSdatums[i]));
          }
          if (JSdatums[i] == beginmaand) {
          mstatus = "active";
          }
          }
          selecter();
          }
          </script>
          </head>

          <body onLoad="selecte r();">
          <form name="formulier " id="formulier" >

          From:
          <select name="form_peri ode_begin" id="form_period e_begin"
          onChange="chang elist2(this)">
          <option value='101>2003 '>jan03</option>
          <option value='102>2003 '>feb03</option>
          <option value='103>2003 '>mrt03</option>
          <option value='104>2003 '>apr03</option>
          <option value='105>2003 '>mei03</option>
          </select><br>

          To:
          <select name="form_peri ode_eind" id="form_period e_eind" >
          <option value='102>2003 '>feb03</option>
          <option value='103>2003 '>mrc03</option>
          <option value='104>2003 '>apr03</option>
          <option value='105>2003 '>mei03</option>
          <option value='106>2003 '>jun03</option>
          </select>
          </form>
          </body>
          </html>


          "Stuart Palmer" <tryandspamme@y oucant.com> wrote[color=blue]
          > Look up 'new option' and a related post called 'simple HTML issue' it may
          > help.
          > You may need to null 2nd drop down and create new options for the[/color]
          remaining[color=blue]
          > months.
          >
          > Stu
          >
          > "Francois" <google@francoi ssachs.nl> wrote[color=green]
          > > Hi,
          > >
          > > In my form I want people to be able to select a startingpoint (month)
          > > and then an endingpoint (month). I can make one list with all te
          > > possible months, and another with again all possible months, but in
          > > that way it is possible to select (i.e.) from june2003 to
          > > february2003.
          > >
          > > To make that (reverse) selection impossible, the options in the second
          > > list should change when the user selects a month in the first list.
          > >
          > > Example:
          > >
          > > First list (From): (last month is automaticly deleted by cgi-script)
          > > January
          > > February
          > > March
          > > April
          > > May
          > >
          > > Second list (To): (first month is automaticly deleted by cgi-script)
          > > February
          > > March
          > > April
          > > May
          > > June
          > >
          > > The user selects 'March' in the first list.
          > > The only options in the second list should be:
          > > April
          > > May
          > > June
          > >
          > > Can anyone tell me how to do this? I think a javascript would be best
          > > for this...
          > > PS If neccessary, the cgi-script to delete the first month of the
          > > second list is ajustable.
          > >
          > > The code I have now:
          > >
          > > From:
          > > <select name="form_peri od_begin" id="form_period _begin">
          > > <option value='101>2003 ' selected>jan03</option>
          > > <option value='102>2003 '>feb03</option>
          > > <option value='103>2003 '>mrc03</option>
          > > <option value='104>2003 '>apr03</option>
          > > <option value='105>2003 '>may03</option>
          > > </select><br>
          > >
          > > To:
          > > <select name="form_peri od_end" id="form_period _end">
          > > <option value='102>2003 '>feb03</option>
          > > <option value='103>2003 '>mrc03</option>
          > > <option value='104>2003 '>apr03</option>
          > > <option value='105>2003 '>may03</option>
          > > <option value='106>2003 ' selected>jun03</option>
          > > </select>[/color]
          >
          >[/color]


            Comment

            • Oz
              #4
              Re: Two (pulldown) lists

              There is rather simple way to do this since both options lists are
              identical:

              function restrict(start) {
              //get the starting options
              var options = start.options;
              //get the index of the month selected
              var index = start.selectedI ndex;
              //clear the end options
              var end = document.getEle mentById("form_ period_end");
              end.innerHTML = "";
              //clone the moths after the selected month and append to the end select
              for (var i=index;i<optio ns.length;i++) {
              var newOption = options[i].cloneNode(true );
              end.appendChild (newOption);
              }

              }



              </script>

              <select name="form_peri od_begin" id="form_period _begin"
              onchange="restr ict(this)">
              <option value='101>2003 ' selected>jan03</option>
              <option value='102>2003 '>feb03</option>
              <option value='103>2003 '>mrc03</option>
              <option value='104>2003 '>apr03</option>
              <option value='105>2003 '>may03</option>
              </select><br>
              <select name="form_peri od_end" id="form_period _end">
              <option value='102>2003 '>feb03</option>
              <option value='103>2003 '>mrc03</option>
              <option value='104>2003 '>apr03</option>
              <option value='105>2003 '>may03</option>
              <option value='106>2003 ' selected>jun03</option>
              </select>






              "Francois" <google@francoi ssachs.nl> wrote in message
              news:16ccb02.03 10230013.35177d f4@posting.goog le.com...[color=blue]
              > Hi,
              >
              > In my form I want people to be able to select a startingpoint (month)
              > and then an endingpoint (month). I can make one list with all te
              > possible months, and another with again all possible months, but in
              > that way it is possible to select (i.e.) from june2003 to
              > february2003.
              >
              > To make that (reverse) selection impossible, the options in the second
              > list should change when the user selects a month in the first list.
              >
              > Example:
              >
              > First list (From): (last month is automaticly deleted by cgi-script)
              > January
              > February
              > March
              > April
              > May
              >
              > Second list (To): (first month is automaticly deleted by cgi-script)
              > February
              > March
              > April
              > May
              > June
              >
              > The user selects 'March' in the first list.
              > The only options in the second list should be:
              > April
              > May
              > June
              >
              > Can anyone tell me how to do this? I think a javascript would be best
              > for this...
              > PS If neccessary, the cgi-script to delete the first month of the
              > second list is ajustable.
              >
              > The code I have now:
              >
              > From:
              > <select name="form_peri od_begin" id="form_period _begin">
              > <option value='101>2003 ' selected>jan03</option>
              > <option value='102>2003 '>feb03</option>
              > <option value='103>2003 '>mrc03</option>
              > <option value='104>2003 '>apr03</option>
              > <option value='105>2003 '>may03</option>
              > </select><br>
              >
              > To:
              > <select name="form_peri od_end" id="form_period _end">
              > <option value='102>2003 '>feb03</option>
              > <option value='103>2003 '>mrc03</option>
              > <option value='104>2003 '>apr03</option>
              > <option value='105>2003 '>may03</option>
              > <option value='106>2003 ' selected>jun03</option>
              > </select>[/color]


                Comment

                • Stuart Palmer
                  #5
                  Re: Two (pulldown) lists

                  Good job for IE, but don't forget to test in NS...

                  "Francois" <francois.sachs @gidesign.nl> wrote in message
                  news:3f992ded$0 $267$19deed1b@n ews.inter.NL.ne t...[color=blue]
                  > With help from some postings and some sites I made this script.
                  > Anyone can improve this?
                  >
                  > <html>
                  > <head>
                  > <title>Test</title>
                  > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                  > <script language="JavaS cript" type="text/javascript">
                  > var JSmaanden = new[/color]
                  Array("jan03"," feb03","mrt03", "apr03","mei03" ,"jun03");[color=blue]
                  > var JSdatums = new
                  > Array("101>2003 ","102>2003","1 03>2003","104>2 003","105>2003" ,"106>2003") ;
                  >
                  > function selecter(){
                  > document.formul ier.form_period e_eind.selected Index =
                  > document.formul ier.form_period e_eind.options. length-1;
                  > }
                  >
                  > function changelist2(beg in) {
                  > document.formul ier.form_period e_eind.options. length = 0;
                  > beginmaand = begin.options[begin.selectedI ndex].value
                  > mstatus="inacti ve";
                  > for (i=0; i<JSmaanden.len gth; i++) {
                  > if (mstatus == "active") {
                  > document.formul ier.form_period e_eind.add(new Option(JSmaande n[i],
                  > JSdatums[i]));
                  > }
                  > if (JSdatums[i] == beginmaand) {
                  > mstatus = "active";
                  > }
                  > }
                  > selecter();
                  > }
                  > </script>
                  > </head>
                  >
                  > <body onLoad="selecte r();">
                  > <form name="formulier " id="formulier" >
                  >
                  > From:
                  > <select name="form_peri ode_begin" id="form_period e_begin"
                  > onChange="chang elist2(this)">
                  > <option value='101>2003 '>jan03</option>
                  > <option value='102>2003 '>feb03</option>
                  > <option value='103>2003 '>mrt03</option>
                  > <option value='104>2003 '>apr03</option>
                  > <option value='105>2003 '>mei03</option>
                  > </select><br>
                  >
                  > To:
                  > <select name="form_peri ode_eind" id="form_period e_eind" >
                  > <option value='102>2003 '>feb03</option>
                  > <option value='103>2003 '>mrc03</option>
                  > <option value='104>2003 '>apr03</option>
                  > <option value='105>2003 '>mei03</option>
                  > <option value='106>2003 '>jun03</option>
                  > </select>
                  > </form>
                  > </body>
                  > </html>
                  >
                  >
                  > "Stuart Palmer" <tryandspamme@y oucant.com> wrote[color=green]
                  > > Look up 'new option' and a related post called 'simple HTML issue' it[/color][/color]
                  may[color=blue][color=green]
                  > > help.
                  > > You may need to null 2nd drop down and create new options for the[/color]
                  > remaining[color=green]
                  > > months.
                  > >
                  > > Stu
                  > >
                  > > "Francois" <google@francoi ssachs.nl> wrote[color=darkred]
                  > > > Hi,
                  > > >
                  > > > In my form I want people to be able to select a startingpoint (month)
                  > > > and then an endingpoint (month). I can make one list with all te
                  > > > possible months, and another with again all possible months, but in
                  > > > that way it is possible to select (i.e.) from june2003 to
                  > > > february2003.
                  > > >
                  > > > To make that (reverse) selection impossible, the options in the second
                  > > > list should change when the user selects a month in the first list.
                  > > >
                  > > > Example:
                  > > >
                  > > > First list (From): (last month is automaticly deleted by cgi-script)
                  > > > January
                  > > > February
                  > > > March
                  > > > April
                  > > > May
                  > > >
                  > > > Second list (To): (first month is automaticly deleted by cgi-script)
                  > > > February
                  > > > March
                  > > > April
                  > > > May
                  > > > June
                  > > >
                  > > > The user selects 'March' in the first list.
                  > > > The only options in the second list should be:
                  > > > April
                  > > > May
                  > > > June
                  > > >
                  > > > Can anyone tell me how to do this? I think a javascript would be best
                  > > > for this...
                  > > > PS If neccessary, the cgi-script to delete the first month of the
                  > > > second list is ajustable.
                  > > >
                  > > > The code I have now:
                  > > >
                  > > > From:
                  > > > <select name="form_peri od_begin" id="form_period _begin">
                  > > > <option value='101>2003 ' selected>jan03</option>
                  > > > <option value='102>2003 '>feb03</option>
                  > > > <option value='103>2003 '>mrc03</option>
                  > > > <option value='104>2003 '>apr03</option>
                  > > > <option value='105>2003 '>may03</option>
                  > > > </select><br>
                  > > >
                  > > > To:
                  > > > <select name="form_peri od_end" id="form_period _end">
                  > > > <option value='102>2003 '>feb03</option>
                  > > > <option value='103>2003 '>mrc03</option>
                  > > > <option value='104>2003 '>apr03</option>
                  > > > <option value='105>2003 '>may03</option>
                  > > > <option value='106>2003 ' selected>jun03</option>
                  > > > </select>[/color]
                  > >
                  > >[/color]
                  >
                  >[/color]


                    Comment

                    Previous template Next
                    Working...