Home/ Questions/Q 7166661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T14:26:59+00:00

I’ve got some code like the following. I want it so that when I

  • 0

I’ve got some code like the following. I want it so that when I chose an item in ‘select 1’ it changes the in the second combo box but I’m not sure of the best way to go about it. Does it have to be AJax or can it be done with just Javascript?

<!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 id="form1" name="form1" method="post" action="">
  <p>
    <label for="select1">Select 1</label>
    <select name="select1" id="select1">
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
    </select>
  </p>
  <p>
    <label for="Select2">Select 2</label>
    <select name="Select2" id="Select2">
      <option>List 1</option>
      <option>List 2</option>
      <option>List 3</option>
    </select>
  </p>

</form>
</body>
</html>

Any tips would be appreciated. Tom

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here:

    <html>
    <head>
        <!-- Connect jQuery from Google library storage -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Create select for class, with id #class -->
        <select id="class" name="class">
            <option value="0">Econom</option>
            <option value="1">Business</option>
            <option value="2">First</option>
        </select>
        <!-- Create select for place, with id #place -->
        <select id="place" name="place" disabled="disabled"></select>
        <!-- Create view place for price, with id #price -->
        <span id="price"></span>
        <script type="text/javascript">
            // available places to choose 
            var available = {
                0:      {
                    25: 50
                },
                1:      {
                    26: 100
                },
                2:      {
                    21: 200,
                },
            }

            // When the document is totally loaded, do that things that's defined in function(e) {}
            $(document).ready(function(e){
                // Bind trigger for class select changing, where $('select#class') - find element that in DOM select inputs and has id="class"
                // When it change, call function(e) {}, inside this function $(this) will be the select itself
                $('select#class').live('change', function(e){
                    // find place select input
                    var place = $('select#place');
                    // if it's disabled, unblock it, and clean all options inside
                    place.removeAttr('disabled').find('option').remove();
                    // foreach places in available create option and put it into place select
                    for (var i in available[$(this).val()]) {
                        place.append($('<option />').val(i).html(i));
                    }
                    // behave like place select have changed, and trigger listener above
                    place.change();
                });

                $('select#place').live('change', function(e){
                    $('span#price').html(available[$('select#class').val()][$(this).val()]);
                });
            });
        </script>
    </body>
</html>

    Totally working example.
    Somehow like that.

    • 0