Select List/Menu Help

Question

ruwanaru 0 Junior Poster in Training

15 Years Ago

I am New in web designing
What i want is i have one List/Menu its called Make it's containing some vehicles Brands when i selected a brand name i want another list/menu display the models that relevant to Brand

this is a screen shot that what i need
[IMG]http://i256.photobucket.com/albums/hh192/magnificent_roo/model.gif[/IMG]

some of vehicle websites are using this thing

Here is my codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><form action="" method="post" name="F2" id="F2">
  <p>Make
    <select name="list" id="list">
      <option value="DESOTO ">DESOTO </option>
      <option value="DODGE ">DODGE </option>
      <option value="DUTTON ">DUTTON </option>
      <option value="EDSEL ">EDSEL </option>
      <option value="ELFIN ">ELFIN </option>
      <option value="EUNOS ">EUNOS </option>
      <option value="FERRARI ">FERRARI </option>
      <option value="FIAT ">FIAT </option>
      <option value="FORD ">FORD </option>
    </select>
  </p>
  <p>Model
    <select name="select" id="select">
    <option>SELECT</option>
    </select>
  </p>
</form>
</body>
</html>

javascript

2 Contributors
12 Replies
720 Views
15 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by ruwanaru

Alxandr 5 Junior Poster in Training

15 Years Ago

Do you want to after- or pre-load your models? This can be done in two ways you see, the first one is to wait for a user to select a brand, then request from the server what models exist for that brand, the other one is that you load all at the beginning, then you filter through that list using javascript. Both are pretty easy to use, but the first one requires you to know some server-scripting (like php or asp or such).

Alxandr 5 Junior Poster in Training

15 Years Ago

All of them would require some use of JavaScript. But I can at least get you started. Since you haven't stated anything about any other use of Javascript I'll suspect that you're not to familiar with the subject, and I'll also use mootools for the code-snippets I'll post here.

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

The following code will take a javascript-array (eather a simple array or an array of array consisting of [text, value] pairs) and populate an select with them. So that's the basic of your code.

Now some html, you wanted 2 selects, one master and one slave:

<select id="master">
   <option value="Audi">Audi</option>
   <option value="BMW">BMW</option>
</select>
<select id="slave">
</select>

Pretty straight forward so far, now let's make a domready function. If you're not familiar with domready it's a bit like onload, but it's fired before the onload event. domready is fired when the DOM-model is ready-built and is a mootools-spesific thing.

function domready()
{
    $('master').addEvent('change', master_changed);
}

That is all we need for our domready function. Now we need to build the master_changed function which will be fired every time the master-select is changed. But here is where we need to determine what method to use, the preloaded or the lateloaded method. This one will be using the lateloaded.

function master_changed()
{
    var req = new Request.JSON({
        url: 'getmodels.php',
        method: 'post',
        data: 'brand=' + encodeURIComponent($('master').get('value'))
    });
    req.addEvent('success', function(response) {
        buildSelect('slave', response);
    });
    req.send();
}

The other way is to preload, to do that you initially have to build up an array of what brands have what models. This can be done as following:

var cars = {
    "BMW": ["Z3", "Z4"],
    "Audi": ["A4", "A3"]
}

Then the master_changed-function needs to be updated to this:

function master_changed()
{
    var s = $('master').get('value').trim();
    buildSelect('slave', cars[s]);
}

The last thing you need to do is to make shure that the domready-function is ever called. You do this simply by adding the line window.addEvent('domready', domready); outside of all the functions.

HTH

Alxandr 5 Junior Poster in Training

15 Years Ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
<script type="text/javascript">

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

var cars = {
    "BMW": ["Z3", "Z4"],
    "Audi": ["A4", "A3"]
}

function master_changed()
{
    var s = $('master').get('value').trim();
    buildSelect('slave', cars[s]);
}

/* NOTE THIS LINE, it causes the domready to run on, well, domready. Then the domready-function sets everything up. */
window.addEvent('domready', domready);
</script>
</head>

<body><form action="" method="post" name="F2" id="F2">
  <p>Make
    <select name="list" id="master">
      <option value="Audi">Audi</option>
      <option value="BMW">BMW</option>
    </select>
  </p>
  <p>Model
    <select name="select" id="slave">
      <option>SELECT</option>
    </select>
  </p>
</form>
</body>
</html>

this si also not working

Fixed it. You just missed one line.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ruwanaru 0 Junior Poster in Training · Answer 1 · 2009-11-18T11:42:32+00:00

Do you want to after- or pre-load your models? This can be done in two ways you see, the first one is to wait for a user to select a brand, then request from the server what models exist for that brand, the other one is that you load all at the beginning, then you filter through that list using javascript. Both are pretty easy to use, but the first one requires you to know some server-scripting (like php or asp or such).

i like to know borth of them ithink using the javascript is fine

ruwanaru 0 Junior Poster in Training · Answer 2 · 2009-11-18T13:49:36+00:00

thank you for the help but im confused with all of this things can you give little bit of help by giving me full working code i did what did you say something wrong with me sry abut the disturb
thank you

Alxandr 5 Junior Poster in Training · Answer 3 · 2009-11-18T14:01:17+00:00

Well, all the code I've given you is working, it's just about puting it together.

Opt 1, only javascript:

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

var cars = {
    "BMW": ["Z3", "Z4"],
    "Audi": ["A4", "A3"]
}

function master_changed()
{
    var s = $('master').get('value').trim();
    buildSelect('slave', cars[s]);
}

Opt 2, using server-callback:

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

function master_changed()
{
    var req = new Request.JSON({
        url: 'getmodels.php',
        method: 'post',
        data: 'brand=' + encodeURIComponent($('master').get('value'))
    });
    req.addEvent('success', function(response) {
        buildSelect('slave', response);
    });
    req.send();
}

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><form action="" method="post" name="F2" id="F2">
  <p>Make
    <select name="list" id="master">
      <option value="Audi">Audi</option>
      <option value="BMW">BMW</option>
    </select>
  </p>
  <p>Model
    <select name="select" id="slave">
      <option>SELECT</option>
    </select>
  </p>
</form>
</body>
</html>

But as said you're required to use the mootools-framework which can be found at mootools.net.

ruwanaru 0 Junior Poster in Training · Answer 4 · 2009-11-18T14:14:24+00:00

how to use this mootool
i don't know any thing about that

Alxandr 5 Junior Poster in Training · Answer 5 · 2009-11-18T14:17:19+00:00

how to use this mootool
i don't know any thing about that

You download this file (which is mootools), add it to your webpages and add a reference to it in the head-section of the html-document using the code:

<script language="javascript" type="text/javascript" src="pathtomootoolsfile.js"></script>

ruwanaru 0 Junior Poster in Training · Answer 6 · 2009-11-18T14:23:13+00:00

You download this file (which is mootools), add it to your webpages and add a reference to it in the head-section of the html-document using the code:
<script language="javascript" type="text/javascript" src="pathtomootoolsfile.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="pathtomootoolsfile.js"></script>
<script type="text/javascript">

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

var cars = {
    "BMW": ["Z3", "Z4"],
    "Audi": ["A4", "A3"]
}

function master_changed()
{
    var s = $('master').get('value').trim();
    buildSelect('slave', cars[s]);
}


function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

function master_changed()
{
    var req = new Request.JSON({
        url: 'getmodels.php',
        method: 'post',
        data: 'brand=' + encodeURIComponent($('master').get('value'))
    });
    req.addEvent('success', function(response) {
        buildSelect('slave', response);
    });
    req.send();
}
</script>
</head>

<body><form action="" method="post" name="F2" id="F2">
  <p>Make
    <select name="list" id="master">
      <option value="Audi">Audi</option>
      <option value="BMW">BMW</option>
    </select>
  </p>
  <p>Model
    <select name="select" id="slave">
      <option>SELECT</option>
    </select>
  </p>
</form>
</body>
</html>

is this correct this is not working

Alxandr 5 Junior Poster in Training · Answer 7 · 2009-11-18T14:45:40+00:00

Yes it's correct except you have to replace the pathtomootoolsfile.js with the actual path to the mootools file.

EDIT:
No, wait a second, you can't use both methods. I sad eater Opt1 OR Opt2. You can't use both at the same time.

ruwanaru 0 Junior Poster in Training · Answer 8 · 2009-11-18T15:04:42+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
<script type="text/javascript">

function buildSelect(select, options)
{
    var select = $(select);
    select.empty();
    options.each(function(item) {
        if($type(item) != "array")
        {
            item = [item, item];
            var option = new Element("option", {
                text: item[0].toString(),
                value: item[1].toString()
            });
            option.inject(select);
        }
    });
}

function domready()
{
    $('master').addEvent('change', master_changed);
}

var cars = {
    "BMW": ["Z3", "Z4"],
    "Audi": ["A4", "A3"]
}

function master_changed()
{
    var s = $('master').get('value').trim();
    buildSelect('slave', cars[s]);
}


</script>
</head>

<body><form action="" method="post" name="F2" id="F2">
  <p>Make
    <select name="list" id="master">
      <option value="Audi">Audi</option>
      <option value="BMW">BMW</option>
    </select>
  </p>
  <p>Model
    <select name="select" id="slave">
      <option>SELECT</option>
    </select>
  </p>
</form>
</body>
</html>

this si also not working

ruwanaru 0 Junior Poster in Training · Answer 9 · 2009-11-18T19:14:45+00:00

ooooops thanx for the help
itz a big help for me ................................
thanx a lot