Change values in combo box by selection in first combo box

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

Answers:

Answer

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.

Answer

You can use the following Cascading DropDown jQuery Plugin

Answer

Making an ajax call is the best way .You can pass the first select box value as parameter to fetch the values that needs to be populated in the second box (populating the second box can be done using java script).

or

you can replace the entire second select box which should be placed inside a div with response from the ajax call , which is select box populated with necessary vales

Answer

My solution is pure Javascript, without using jQuery or AJAX(?!?), though I would highly recommend you look into jQuery.

Add this somewhere in the body.

<script type="text/javascript">
   function changeSelectTwo( elm ){
      var i;
      for (i = 0; i < elm.length; i++) {
         if( elm[i].selected ) {
            document.form1.Select2[i].selected = true;
         }
      }
   }
</script>

Then, modify the first select element to call this on a change.

<select name="select1" id="select1" onChange="changeSelectTwo( this );" >

Finally, to make this example work best, add a fourth option to the second select.

See this for more info: http://homepage.ntlworld.com/kayseycarvey/jss3p9.html

Answer

You can do this with an onchange javascript handler in select1:

<select name="select1" id="select1" onchange="Select1_Changed();">

And this is the javascript:

<script language="javascript" type="text/javascript">
    function Select1_Changed() {
        var select1 = document.getElementById("select1");
        var selectedItem = select1.options[select1.selectedIndex];
        var selectedText = selectedItem.text;
        var selectedValue = selectItem.value;
    }
</script>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.