0

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>
2
Contributors
12
Replies
13
Views
8 Years
Discussion Span
Last Post by ruwanaru
Featured Replies
  • 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. [code=JavaScript] … Read More

  • [QUOTE=ruwanaru;1050978][CODE]<!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: … Read More

0

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

0

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

Edited by ruwanaru: n/a

1

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

0

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

0

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.

Edited by Alxandr: n/a

0

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

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

0

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.

Edited by Alxandr: n/a

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

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.