change event in jquery > dynamic form elements > how to retrieve in php

Question

Hi,

In order to choose categories, I want to use dropdown lists. Each list contains one level of categories. So it's: top level, sub, subsub, subsubsub etc. Every level is dynamically retrieved thru a script 'getcat.php'. It shows a object.

The retrieval so far works with the code underneath. However, Since it's form, i want to get the last selected value so i can have the category id. This however, is not working for me. I tried $("select:last option:selected") but that's not working with the newly inserted elements.

Second part: After selecting the category, an input field must show up where the user can make its own subcategory (inside the category selected). This too, is not working with the new elements.

Now i tried to play something with .live but that doesn't support 'change' events. So, do you guys have any tips on how to improve it? thx a bunch!

Currently I've got the following code:

$("select").bind("change", function(){
    $(this).nextAll().remove();
    var value = $(this).val();
    $("#currentcat").val(value);
    if($("select:last option:selected").hasClass('makenew')) {
     $("#newcat").show();
    }
    else if($("select:last option:selected").hasClass('disabled')) { }
    else {
    $.get("getcat.php", { c: value },
  function(data){
      $("#getcats").append(data);
  });
 $("#newcat").hide();
 }    
});

However, as you can read, it's not a beauty. Tips? thx..

Answer 1

Are you re-binding the onchange event to the new select box?

Answer 2

If you want new <option>s to be bound to the DOM and work across different browsers, I would suggest appending them to your select using document.createElement and document.createTextNode like so:

var opt = document.createElement('option');
opt.value = "someValue";
opt.appendChild(document.createTextNode("someText"));
$('#currentcat').append(opt);

So instead of using $.get you should probably use $.getJSON to fetch a JSON object containing the values and text attributes of the options you will be appending to your select. The JSON object retrieved from the server should look like this:

                { "options" : [   
                                    { "text" : "Fishing",  // First element
                                      "value"  : "5" },
                                    
                                    { "text" : "Skiing",  // Second Element
                                      "value"  : "70" }
                               ]
                }

Iterating over the object would look something like this:

$.getJSON("getcat.php", { c: value }, function(json) {
    var $select = $('<select></select>).attr('id','currentcat').attr('name','currentcat').hide(); 
    $.each(json.options, function(i, item) {
        var opt = document.createElement('option');
        opt.value = item.value;
        opt.appendChild(document.createTextNode(item.text));
        $('#currentcat').append(opt);        
    });
    $("#newcat").hide();
    $('#someDiv').append($select).show();
});

The above is not tested, and reflects my understanding of your question. Hope that helps.