Dependent listboxes

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

    Dependent listboxes

    I need the following functionality: With 2 listboxes populated from a
    database with the SAME data, I need any of the listboxes to stop displaying
    the option when selected at the other listbox. Eg: data records are A and B,
    and initially are available in both listboxes, but once the user selects A
    in the first listbox, the second one should only display B.

    Any reference?


    Tags: None
    • McKirahan
      #2
      Re: Dependent listboxes

      "Simon Templar" <poppoppop2@gmx .co.uk> wrote in message
      news:2ui1qmF2ae 54eU1@uni-berlin.de...[color=blue]
      > I need the following functionality: With 2 listboxes populated from a
      > database with the SAME data, I need any of the listboxes to stop[/color]
      displaying[color=blue]
      > the option when selected at the other listbox. Eg: data records are A and[/color]
      B,[color=blue]
      > and initially are available in both listboxes, but once the user selects A
      > in the first listbox, the second one should only display B.
      >
      > Any reference?
      >[/color]

      Will this help? Watch for word-wrap.

      <html>
      <head>
      <title>selnodup .htm</title>
      <script type="text/javascript">
      function noDuplicate() {
      var form = document.forms[0];
      var valu = form.Sel1.optio ns[form.Sel1.selec tedIndex].value;
      form.Sel2.optio ns[valu] = null;
      }
      </script>
      </head>
      <body>
      <form>
      <b>From :</b>
      <select name="Sel1" onchange="noDup licate()">
      <option value="">
      <option value="1">Chica go
      <option value="2">New York
      </select>
      &nbsp; &nbsp;
      <b>To :</b>
      <select name="Sel2">
      <option value="">
      <option value="1">Chica go
      <option value="2">New York
      </select>
      </form>
      </body>
      </html>



        Comment

        • Simon Templar
          #3
          Re: Dependent listboxes

          This code works fine. The only problem appears when the user changes their
          selection. The second listbox does not show the hidden option back. I will
          try to improve that.

          Thanks!

          "McKirahan" <News@McKirahan .com> escribió en el mensaje
          news:qMSgd.3355 83$3l3.245825@a ttbi_s03...[color=blue]
          > "Simon Templar" <poppoppop2@gmx .co.uk> wrote in message
          > news:2ui1qmF2ae 54eU1@uni-berlin.de...[color=green]
          > > I need the following functionality: With 2 listboxes populated from a
          > > database with the SAME data, I need any of the listboxes to stop[/color]
          > displaying[color=green]
          > > the option when selected at the other listbox. Eg: data records are A[/color][/color]
          and[color=blue]
          > B,[color=green]
          > > and initially are available in both listboxes, but once the user selects[/color][/color]
          A[color=blue][color=green]
          > > in the first listbox, the second one should only display B.
          > >
          > > Any reference?
          > >[/color]
          >
          > Will this help? Watch for word-wrap.
          >
          > <html>
          > <head>
          > <title>selnodup .htm</title>
          > <script type="text/javascript">
          > function noDuplicate() {
          > var form = document.forms[0];
          > var valu = form.Sel1.optio ns[form.Sel1.selec tedIndex].value;
          > form.Sel2.optio ns[valu] = null;
          > }
          > </script>
          > </head>
          > <body>
          > <form>
          > <b>From :</b>
          > <select name="Sel1" onchange="noDup licate()">
          > <option value="">
          > <option value="1">Chica go
          > <option value="2">New York
          > </select>
          > &nbsp; &nbsp;
          > <b>To :</b>
          > <select name="Sel2">
          > <option value="">
          > <option value="1">Chica go
          > <option value="2">New York
          > </select>
          > </form>
          > </body>
          > </html>
          >
          >
          >[/color]


            Comment

            • McKirahan
              #4
              Re: Dependent listboxes

              "Simon Templar" <poppoppop2@gmx .co.uk> wrote in message
              news:2um7edF2ar vevU1@uni-berlin.de...[color=blue]
              > This code works fine. The only problem appears when the user changes their
              > selection. The second listbox does not show the hidden option back. I will
              > try to improve that.
              >
              > Thanks![/color]

              [snip]

              Try this; watch for word-wrap.

              <html>
              <head>
              <title>selnodup s.htm</title>
              <script type="text/javascript">
              function selects(what) {
              var form = document.forms[0];
              var opts = new Array;
              opts[0] = "";
              opts[1] = "Chicago";
              opts[2] = "New York";
              if (what == 0) {
              form.Sel1.optio ns.length = 0;
              }
              form.Sel2.optio ns.length = 0;
              for (var i=0; i<opts.length; i++) {
              if (what == 0) {
              form.Sel1.optio ns[i] = new Option(opts[i], i);
              }
              form.Sel2.optio ns[i] = new Option(opts[i], i);
              }
              }
              function noDuplicate() {
              var form = document.forms[0];
              selects(1);
              var valu = form.Sel1.optio ns[form.Sel1.selec tedIndex].value;
              form.Sel2.optio ns[valu] = null;
              }
              </script>
              </head>
              <body onload="selects (0)">
              <form>
              <b>From :</b>
              <select name="Sel1" onchange="noDup licate()">
              </select>
              &nbsp; &nbsp;
              <b>To :</b>
              <select name="Sel2">
              </select>
              </form>
              </body>
              </html>

              This link may help: http://www.quirksmode.org/js/options.html


                Comment

                Previous template Next
                Working...