Home/ Questions/Q 6345219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:46:48+00:00

My goal: In case someone selects a specific value from an select box something

  • 0

My goal: In case someone selects a specific value from an select box something is supposed to happen.

My environment:

  • Jquery: 1.62
  • Jquery Mobile: 1.0b
  • iOS: 4.3.5

I am binding the event handler to the select box by

$( "#location" ).bind( "change", function(event, ui) {
   alert("foo");
});

The code works without jquery mobile. Is it a bug or not the right approach for event binding in Jquery Mobile?

Pls find below the complete code example.

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript">
    </script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>
    <script>
       $(document).ready(function() 
       {                  
            $( "#location" ).bind( "change", function(event, ui) {
             alert("foo");
             });
      }); 
    </script>
    <link rel="stylesheet" href="css/theme-i.css">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   <div id="container">
       <form>             
            <div data-role="page">
                        <select name="location" id="location" >
                            <option value="1">Option1</option>
                            <option value="2">Option2</option>

                        </select>
               </div> <!-- /page -->
        </form>                               
    </div><!-- /container  -->
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think your markup is a little out of order, Here is a live exmaple:

    JS:

    $("#location").change(function() {
    alert('Location Changed value: '+$('#location option:selected').val()+' text: '+$('#location option:selected').text());
});

    HTML:

    <div data-role="page" id="home">
   <div id="container">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#locationPage">Location Page</a></li> 
        </ul>                               
    </div>
</div>

<div data-role="page" id="locationPage">
   <div id="container">
       <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul>
       <br />
       <form action="#" id="theForm" method="get">                         
            <select name="location" id="location" >
                <option value="1">Option1</option>
                <option value="2">Option2</option>
            </select>              
        </form>                               
    </div>
</div>
    • 0