CODEWITHSUNDEEP
jqueryselectchained
vitre
vitre

Reputation: 43

Jquery Chained Select

I'm trying to follow the guide here http://www.appelsiini.net/projects/chained

for chaining multiple select boxes, but I'm very new to javascript and everything front end in general.

I thought I had copied his example by creating the following HTML file, but it's not working as it should.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

<script charset=utf-8>
  $(function(){
      $("#series").chained("#mark");
  });
  </script>
    </head>

<body>


<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>






  </body>
</html>

Upvotes: 0

Views: 13745

Answers (2)

Muslim
Muslim

Reputation: 66

Change class option child with data-chained like this:

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" data-chained="bmw">3 series</option>
  <option value="series-5" data-chained="bmw">5 series</option>
  <option value="series-6" data-chained="bmw">6 series</option>
  <option value="a3" data-chained="audi">A3</option>
  <option value="a4" data-chained="audi">A4</option>
  <option value="a5" data-chained="audi">A5</option>

Upvotes: 0

pabo
pabo

Reputation: 635

It's common practice to include a jsfiddle when submitting this type of question. See my example here, which works. If you come up with an example that doesn't work, and show us a jsfiddle, we can help much better.

If I had to guess, I'd say your script paths are wrong.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

Upvotes: 1

Related Questions