How to get value of select element and how to act on change?

Question

Having a problem with the change() event in jQuery:

$("select[name=cmm]").change(function(){
    total();
});

For some reason the "total" function isn't being called with the code above. The html code is:

  <select name="cmm">
      <option value="none">none</option>
      <option value="one">the first</option>
      <option value="two">the second</option>
  </select>

Am i referring to the element the wrong way or something? Or calling the function the wrong way?

---

Update: The alert function here doesn't show up, so I'm guessing the change event is never called..

$(document).ready(function() {
$("select[name=cms]").change(function(){
    total();
    alert($("select[name=cms]").length);
});
});

(and yes, I have been using doc-ready all the time)

Answer 1

For updated question:
Make sure your code is running in a document.ready handler so the <select> element is in the DOM and ready, like this:

$(function() {
  $("select[name=cmm]").change(function(){ total(); });
});

---

For previous question:
You're missing the second m on your selector, it should be:

$("select[name=cmm]").change(function(){ total(); });

Or shorter:

$("select[name=cmm]").change(total);

For the second, just use .val() directly on the <select> to get the value, like this:

var iets = $("select[name=cmm]").val();
//or when calling .change(total) like above, inside total you can use:
var iets = $(this).val();

When you specify option it gets the value of the first <option>, regardless of what's selected.

Answer 2

I'll assume it's not the cm vs. cmm issue, and that you're probably assigning the onChange handler too early, meaning the DOM has not yet been initialized.

<script type='text/javascript'>//<![CDATA[
    // if your javaScript is initialized before the actual
    // select element liek this, it will not work
    $("select[name=cm]").change(function(){
        total();
    });

    function total() {
        alert("works?");
    }
</script>
//]]></script>

<select name="cm">
  <option value="none">none</option>
  <option value="one">the first</option>
  <option value="two">the second</option>
</select>

Your javaScript should be executed after the DOM is ready, so you'll have to use jQuery's document.ready event like this:

<script type='text/javascript'>//<![CDATA[
    $(document).ready(function() {
      $("select[name=cm]").change(function(){
        total();
      });

      function total() {
        alert("works?");
      }
    }
</script>
//]]></script>

<select name="cm">
  <option value="none">none</option>
  <option value="one">the first</option>
  <option value="two">the second</option>
</select>

Or place it after the element in question, like this:

<select name="cm">
  <option value="none">none</option>
  <option value="one">the first</option>
  <option value="two">the second</option>
</select>


<script type='text/javascript'>//<![CDATA[
    $("select[name=cm]").change(function(){
        total();
    });

    function total() {
        alert("works?");
    }
</script>
//]]></script>

Answer 3

I was having the problem because of a plugin I was using to style the select element. The solution to my problem (being that the onchange function wouldn't work) is here: http://code.google.com/p/lnet/issues/detail?id=41