CODEWITHSUNDEEP
jquery-mobilecordova
Akshobhya
Akshobhya

Reputation: 139

popup box after selecting option from drop down list in phonegap

How to open popup box after selecting the option from drop down list in phonegap. I have gone through documents but only through anchor tag we can acheive that. Please help how can I do this.

Thanks in advance

Upvotes: 1

Views: 2281

Answers (2)

ezanker
ezanker

Reputation: 24738

Given a standard jQM select widget, e.g:

<div class="ui-field-contain">
    <label for="select-native-1">Basic:</label>
    <select name="select-native-1" id="select-native-1">
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
    </select>
</div>

and standard popup markp, e.g.:

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
         <h1>Selected Val?</h1>
    </div>
    <div role="main" class="ui-content">
         <h3 class="ui-title">You selected the item with a value of</h3>
        <p id="selectedVal"></p> 
        <a href="#" class="ui-btn ui-corner-all ui-shadow  ui-btn-b" data-rel="back" data-transition="flow">OK</a>
    </div>
</div>

You can handle the change event of the select and then call the popup widget's open method to launch the popup:

$("#select-native-1").on("change", function () {
    var val = $(this).val();
    $("#selectedVal").html(val);
    $("#popupDialog").popup("open");
});

Here is a working DEMO

Upvotes: 1

Vikram
Vikram

Reputation: 720

If you are using select tag for dropdown then bind function onchange() with select tag. AS

In HTML

   <select id = "status_selector" onchange="fnStatusChanged()"></select>

In Java Script

 <script>
  function fnStatusChanged(){
    // Write Something
  }
  <script>

Upvotes: 2

Related Questions