Change Values In Combo Box By Selection In First Combo Box

January 30, 2024 Post a Comment

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.

Solution 1:

Here:

<html><head><!-- Connect jQuery from Google library storage --><scriptsrc="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 --><selectid="class"name="class"><optionvalue="0">Econom</option><optionvalue="1">Business</option><optionvalue="2">First</option></select><!-- Create select for place, with id #place --><selectid="place"name="place"disabled="disabled"></select><!-- Create view place for price, with id #price --><spanid="price"></span><scripttype="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 inputvar 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 selectfor (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.

Solution 2:

You can use the following Cascading DropDown jQuery Plugin

Solution 3:

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

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

Solution 4:

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.

<scripttype="text/javascript">functionchangeSelectTwo( 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

Solution 5:

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

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

And this is the javascript:

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

Html5 Guide