WEB jquery and cascading drop down issue

Discussion in 'OT Technology' started by jdog12, Feb 20, 2009.

  1. jdog12

    jdog12 New Member

    Joined:
    Nov 27, 2004
    Messages:
    5,474
    Likes Received:
    0
    I have two dropdowns in a form. when the page loads, the first dropdown is loaded with a list of majors at a college. the second list is disabled. once the first list changes, an ajax call is made to get the options for the second drop down, it is enabled, and the options are displayed. my problem is, I can get the value via javascript for the first dropdown, but not for the second one (value always comes up as undefined) I need to be able to do this so I can post the form and send along the value of the second drop down.

    here is the html. the second dropdown is empty, because it will be loaded via ajax after first list is loaded.
    Code:
     <select id="classDropDown" name="classDropDown">
          <option value="1"> PHIL </option>
          <option value="2"> MATH</option>
          <option value="3"> BIO </option>
    </select>
    
        <select id="classes" name="classes" disabled>
        </select>
    
    here is the JS.. note, the second dropdown list loads everything just fine, if I change the .post so that it sends the value of the first dropdown (which I don't need) it sends the correct value... but if i try to send the value of the dynamic dropdown.. it just sends "undefined"
    Code:
    
    <script type="text/javascript">
        $(function() {
            $('select#classDropDown').change(function() {
                $.getJSON('/books/GetModels', { selectedClass: this.value },
                function(response) {
    
                    var options = '';
                    for (var i = 0; i < response.length; i++) {
                        options += "<option value='" + response[i].ID + "'>"
                      + response[i].name + "</option>";
                    }
                    $('select#classes').removeAttr('disabled').html(options);
                    $('input#submitClassButton').removeAttr('disabled');
                });
            });
    
    
            $('input#submitClassButton').click(function() {
                var selectedOption = $('select#classes').val();
                alert(selectedOption);
                $.post("/Books/FindBooksByClass", { classes: selectedOption, test: 'me' });
    
            });
    
        });
    
    </script>
    
    
    
    
    the alert is just in there so I can see what the value is and the "test: 'me'" is just test code for the server side code(it does nothing and will be removed)

    Any ideas how I can get the actual value?
     
    Last edited: Feb 20, 2009
  2. jdog12

    jdog12 New Member

    Joined:
    Nov 27, 2004
    Messages:
    5,474
    Likes Received:
    0
    Oh wow, I feel really stupid, I've been looking at this for like almost 2 hours and it seems the issue was that property name was 'id' not ID and thats why I wasnt getting a value for it. seems to be working now.
     
  3. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    get firefox and the firebug extension for it. it's awesome when you're working with javascript.
     
  4. jdog12

    jdog12 New Member

    Joined:
    Nov 27, 2004
    Messages:
    5,474
    Likes Received:
    0

    I have firebug, I just haven't really used it.. I need to mess around with it. Last time I did Javascript stuff was for an entry level programming class to teach us the basics of programming; that was like 3 years ago.

    Other funny thing is, the function for responding to the click method was also unnecessary. I put it in because I thought that since the second dropdown was dynamic, it wouldnt be able to pass its value when the form was posted (when in reality it was just a property type), so I was trying to do it manually with this method..
     

Share This Page