Get selected value (not text) of select list in jQuery Mobile

I'm stuck with getting the value attribute of an option in a select list with jQuery Mobile.

My HTML template:

<div data-role="fieldcontain" class="activity ui-hide-label">
  <label for="activity">Activity</label>
  <select name="activity" id="activity">
    <option value="">Activity</option>
    <option value="3">Athlete</option>
    <option value="2">Regular sports</option>
    <option value="1">No sports</option>
  </select>
</div>

My JS function to get the value:

function getValue() {
  var activityValue = $('#activity').val();
  console.log("activity value: ", activityValue);
  localStorage['activity'] = activityValue;
}

Regardless what I choose from the select list, the variable activityValue is always empty. I also tried with option:selected and similar possibilites.

Obviously the DOM select list doesn't change, when I choose an option. For example, if I choose "Regular sports" the DOM looks like this:

<div data-role="fieldcontain" class="activity ui-hide-label ui-field-contain ui-body ui-br">
  <label for="activity" class="ui-select">Activity</label>
    <div class="ui-select">
      <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="g" data-inline="false" data-mini="false" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize ui-btn-block ui-btn-icon-right ui-btn-up-g">
        <span class="ui-btn-inner ui-btn-corner-all">
          <span class="ui-btn-text">Regular sports</span>
          <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">&nbsp;</span>
        </span>
        <select name="activity" id="activity">
          <option value="">Activity</option>
          <option value="1">Athlete</option>
          <option value="2">Regular sports</option>
          <option value="3">No sports</option>
        </select>
      </div>
    </div>
</div>

I'm I missing something? To recapitulate: I need the selected value (1,2 or 3) and NOT the text ("Regular sports" in the above example.

Answers


Well, there is an extra function to get the select changes.

$('#activity').live( "change", function(event, ui) {
  localStorage['activity'] = $(this).val();
});

Thanks to Raminson and thecodeparadox for pointing me to the right direction.


how do you call the getValue() function?

try this:

$('#activity').change(function(){
    getValue();
})

$('#activity').change(function() { // change event will fire on every selection change
  var activityValue = $(this).val(); // this.value
  console.log("activity value: ", activityValue);
  localStorage['activity'] = activityValue;
});

var activityValue = $('#activity :selected').val();


Need Your Help

URL to address in page data?

javascript url dom

We have a JavaScript widget which loads data from an URL.

Login page in asp.net and sql server using c#

c# asp.net

I have a login page in my project which is working correctly. My database (sql server) has 4 fields in which the last one is 'permission', which has 2 values: Admin, User.