开发者

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

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)


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.


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>


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜