CODEWITHSUNDEEP
jqueryjquery-mobile
Phill Healey
Phill Healey

Reputation: 3180

Javascript select change won't fire

I'm trying to detect when a Select has its value changed (eg the user select one of the dropdown options). However I can't seem to get the thing to fire. I've tried numerous solutions but I can't see what I'm missing.

Here's what I've currently got:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- jQueryMobileCSS - original without styling -->
    <link rel="stylesheet" href="nativeDroid_v0.2.2/development/css/jquerymobile.css" />
    <!-- jQuery / jQueryMobile Scripts -->
    <script src="JQueryMobile/jquery-1.10.2.js"></script>
    <script src="JQueryMobile/jquery.mobile-1.3.2.js"></script>
    <!-- customised styles -->
    <link rel="stylesheet" type="text/css" href="css/index.css" />  
    
            <script type="text/javascript">
        $(".test").change(function() {
          //var newVal = $(this).val();
          alert("The new value is: " + $(this).val());
        });
                </script>
</head>

<body> 


                    <select name="select-choice-enmeasurement" id="select-choice-enmeasurement" class="test">
                        <option value="C45">C45</option>
                        <option value="M3">M3</option>
                        <option value="M5">M5</option>
                        <option value="M8">M8</option>
                    </select>
    
    </body>
</html>

I've also tried the above but by detecting the class rather than Id of the select control.

P.s. There is a reference to JqueryMobile purely because the above is extracted from a JQM project. However I've created the above as a unique page in this form to remove potential conflicts, etc.

Upvotes: 0

Views: 93

Answers (2)

Phill Healey
Phill Healey

Reputation: 3180

After taking the helpful comments from KamilT and Omar, I have solved the issue of not being able to place the JavaScript outside of the form.

The solution is/was to include the form id before the element id. eg:

    <script type="text/javascript">
        $("#formenstep1 #select-choice-enmeasurement").change(function() {
            //alert("The new value is: " + $(this).val());
        });
    </script>

This can now be located at the footer of the page's html and it will pickup the required form element.

Upvotes: 0

Kamil T
Kamil T

Reputation: 2216

Use

$(function(){
    $(".test").change(function() {
      //var newVal = $(this).val();
      alert("The new value is: " + $(this).val());
    });
)};

Without it, you try to add an eventHandler to all elements with .test class, but your select isn't created yet - the html is parsed from top to bottom. The $(function(){ }); is triggered, when the whole page is loaded - including your select. Within the function, you can add the handler, because all HTML elements are already loaded.

Upvotes: 2

Related Questions