Multiple linked pulldown menues

JavaScript
1

Hi,
I have script for a pulldown menu where the option create another pulldown menu. But how can I adapt this code so that another pulldown menu is created from the second.
Here is the code that I am working from,

<style type="text/css">
    </style>
    <script type="text/javascript">
        function populate(o)
        {
            d=document.getElementById('de');
            if(!d){return;}            
            var mitems=new Array();
            mitems['A']=['1','2','3','4','5'];
            mitems['B']=['a','b'];
            d.options.length=0;
            cur=mitems[o.options[o.selectedIndex].value];
            if(!cur){return;}
            d.options.length=cur.length;
            for(var i=0;i<cur.length;i++)
            {
                d.options[i].text=cur[i];
                d.options[i].value=cur[i];
            }
        }
    </script>
</head>
<body>
<form action="" method="get">
    <label for="or">Our menu:</label>
    <select name="or" id="or" onchange="populate(this)">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    <label for="de">Select:</label>
    <select name="de" id="de">
    </select>
    <input type="submit" value="Show me" />
</form>
</body>

Thanks,
Shane

2

Hi,

You could do it like this (requires jQuery):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dependent select</title>
    <!-- http://www.sitepoint.com/community/t/multiple-linked-pulldown-menues/108398 -->
  </head>
  <body>
    <form action="" method="get">
      <p>
        <label for="master">Master:</label>
        <select name="master" id="master">
          <option>Please select</option>
          <option value="a">Option A</option>
          <option value="b">Option B</option>
        </select>
      </p>
      <p>
        <label for="dependent_1">Dependent 1:</label>
        <select name="dependent_1" id="dependent_1"></select>
      </p>
      <p>
        <label for="dependent_2">Dependent 2:</label>
        <select name="dependent_2" id="dependent_2"></select>
      </p>

      <input type="submit" value="Submit" />
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
      var opts = {
        master: {
          "dependent": "dependent_1",
          "a": ["one", "two"],
          "b": ["three", "four"]
        },
        dependent_1: {
          "dependent": "dependent_2",
          "one": ["five", "six"],
          "two": ["seven", "eight"],
          "three": ["nine", "ten"],
          "four": ["eleven", "twelve"]
        }
      };

      $("select").on("change", function(){
        if(!opts[this.id].dependent){ return; }

        var dependent = opts[this.id].dependent,
            selectedOpt = $(this).val(),
            optsArray = opts[this.id][selectedOpt],
            $dependentSelect = $("#" + dependent),
            $plsSelect = $("<option>Please select</option>");

        if(this.id === "master"){
          $("select").not("#master").empty();
        } else {
          $dependentSelect.empty();
        }

        if($(this).val() === "Please select"){
          return;
        } else {
          $dependentSelect.append($plsSelect);
        }

        $.each(optsArray, function(i, v){
          var opt = $("<option value = '" + v + "'>" + v + "</option>");
          $dependentSelect.append(opt);
        });
      });
    </script>
  </body>
</html>

Here’s a demo.

Or you could use a plugin, such as this one.

3

Hi Pullo
Thanks for this, it is exactly what I am looking for.
I don’t like that it depends on an external link for the jQuery library.
I’ve never used jQuery before or in fact Javascript.
Thanks for the post, I really appreciate it,
Shane

4

jQuery is a small JavaScript library which makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Fair enough, but gzipped and minified the library is only 77.42 KB in size (ref). Also if you include it from the Google CDN, the chances are the library is already cached on a user’s system anyway.

5

You can just store it on your own server. An external link is optional.

6

True, but including it via a popular CDN means that there is a good chance of it being cached already.

7

I was listening to a 2014 podcast some time back (with Chris Coyier and some JS wizz) and they were saying that the latest advice is to link to it locally. Darned if I can remember why, though. I think one of the reasons was that there are lots of different versions floating around etc. etc. but I can’t remember what the main reason was. (Thought I had a link somewhere, but can’t find it.) Pretty sure it was ShopTalk, anyhow.

8

I’d be interested to hear that.
As far as I was aware, CDN was the better way, but having just spent a while Googling the subject, there seem to be a number of pros and cons to each approach.

One thing I found out that I hadn’t considered for example, was that some employers’ restrictive firewalls block all connections to Google, including those to Google APIs.

1 Like
9

Chris Coiyer was sAying on his own blog here that both CDN and local each have their own benefits, so load first from the CDN, then check if it loaded and get it locally if that failed.

1 Like
10

Well you guys clearly know way more than me… but thanks for your insight.
Shane

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.