Question

I’m working on an ASP.Net webpage which will use the jQuery Dropdown Checklist (http://code.google.com/p/dropdown-check-list/). I’m fairly inexperienced with JavaScript and completely new to jQuery.

What I want to do is collect the values of the selected items every time a checkbox is checked/unchecked.

Here’s what I have so far:

var values = "";
$("#s1").change(function () {
     $("#s1").dropdownchecklist(function(selector) {
          for (i = 0; i < selector.options.length; i++) {
               if (selector.options[i].selected && (selector.options[i].value != "")) {
                    if (values != "") values += ",";
                    values += selector.options[i].value;
               }
          }
     });
});

I think the problem is in the 3rd line, but I’m not sure exactly what is wrong.

If anyone could point me in the right direction, I’d appreciate it. Thanks in advance.

Response to zod…
Thanks that was pretty much exactly what I needed. However, I still have some kind of syntactic error. Here’s my code:

var values = "";
$("#s1").change(function () {
     $("#s1 option:selected").each(function () {
          if (values != "") values += ",";
          values += $(this).value();
     });
     alert(values);
});

When I run it, the jQuery Dropdown Checklist looks like a regular list, so I must still have something wrong.

This is somewhat off-topic, but are there any tools that make working with JavaScript and jQuery any easier? I’ve been spoiled working with Visual Studio and using its debugger and intellisense. Is there anything like that for JavaScript and jQuery?

Response to Ender…
Wow. I like your solution. Yeah, I tend to over-complicate things.
I’m not sure what I did wrong when I tried zod’s solution, it probably also works, but I think I’ll go with the simpler one.

Thanks for you help.

Answer 1

You don’t need to get anywhere near as fancy as you are. Inside your .change() event, simply access the .val() of the select to get the values of the checked items. Like this:

$(function() {
    $("#s1").dropdownchecklist();

    $('#s1').change(function() {
        alert($(this).val());
    });
});

See a live demo here: http://jsfiddle.net/Ender/ZsMc4/