Select List/Menu Help

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>

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 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

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 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).

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

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

Show Comments

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

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 Years Ago

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

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

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 .

Alxandr

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 Years Ago

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

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

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>

Alxandr

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 Years Ago

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

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

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.

Alxandr

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 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]);
}


</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

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

2 Years Ago

Show Comments

<!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.

Alxandr

Junior Poster in Training

73 posts since May 2009

Reputation Points: 15

Solved Threads: 10

2 Years Ago

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

ruwanaru

Junior Poster in Training

67 posts since Mar 2009

Reputation Points: 10

Solved Threads: 1

This question has already been solved

You