Assigning a variable from a select box

I have been trying all day to "catch" or assign/bind to the chosen state and assign it to a variable called "text" so that I can use it in yet another API call for the other drop down box "Products".
I figured I must just be missing something and was hoping for a little help.

<html dir="ltr" lang="en-US">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
      <title>Legis Connect</title>
      <script  type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
      <link rel="stylesheet" href="css/kendo.common.min.css">
      <link rel="stylesheet" href="css/kendo.black.min.css">
  <link rel="stylesheet" href="css/kendo.mobile.all.min.css">
        <link rel="stylesheet" href="css/kendo.dataviz.min.css">
      <script src="js/kendo.all.min.js"></script>
   </head>
   <body>
            <div class="k-widget k-header">
                     <span class="infoHead">Information</span>
                     <p>
<input id="state" placeholder="Select State..." />
</p>
<p>
         <input id="products"/>
         </p>
            <script>
            
      $(document).ready(function() {
                    $("#state").kendoDropDownList({
                   //     optionLabel: "Select State...",
                        dataTextField: "name",
                        dataValueField: "abbreviation",
                        dataSource: {
                         transport: {
                              read: {
                                url: "http://openstates.org/api/v1/metadata/?apikey=????????",
                                dataType: "jsonp"
                              }
                            }
                        }
                        
                    });
                        //  change: function(test){
                    //  var text = this.value()
            var states=$("#state").data("kendoDropDownList");
states.bind("change", function(e) {
    var text = (this.value())
                    alert (text)
});
                    
          $("#products").kendoDropDownList({
                      optionLabel: "Select product...",
                        dataTextField: "legislature_name",
                        dataValueField: "legislature_name",
                        dataSource: {
                            transport: {
                              read: {
                                url: "http://openstates.org/api/v1/metadata/"+text+"/?apikey=???????????????????",
                                dataType: "jsonp"
                              }
                            }
                            }
                            
                    
                      })
                      $("#products").data("kendoDropDownList");
      });

 

 
            </script>

       
        </div>
   </body>
</html>

Solution

It appears that you're trying to create cascading dropdowns; when you choose a value in the states dropdown list, it loads the products available for the selected state. There's a helpful article from Telerik on how to do that with the combo box controls (works the same from dropdown lists): http://docs.kendoui.com/getting-started/web/combobox/cascading. There's actually a property called cascadeFrom which you can set on the products dropdown list to tell it to cascade from the states dropdown list. Hope that helps!