##

Demos

Menu Search

## Problem:

# Updating the value of enhanced form elements does not work

## Solution:

While some form elements that jQuery Mobile enhances are simply styled, some (like the slider) are custom controls built on top of native inputs. Changing the value of a normal input such as a text or search box will render the value immediately, but changing the value of a select menu, slider, or any other complex custom form control will require calling a `refresh` operation to re-enhance the control to reflect your new value.

Let's use the example of a Select Menu to demonstrate how to update the value on a complex control:

        // Some markup for a select menu
        <select>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
        </select>

        // Your Javascript:
        <script>
        $('#page1').on('pagecreate', function() {
          // Update the select menu's value to 'c' and refresh the control
          $('select').val('c').selectmenu('refresh');
        });
        </script>

In the snippet above we have a simple select menu, and we are updating the value of the menu after the page has initialized. When jQuery Mobile enhances the page, the select menu will be modified to make it more mobile friendly and consistent across devices. That means the simple select menu we are used to interacting with needs a little more work to update. We can simply call `$('select').selectmenu('refresh')` to have our select menu update to its current value.

Other form inputs that require refreshing are the slider, the toggle switch, checkboxes, and radio buttons. To refresh the slider or the toggle switch, call `slider('refresh')`. To refresh the checkbox or radio controls, call `checkboxradio('refresh')`.

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Filterable

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home

- ### Getting started

  - Introduction
  - Responsive Web Design

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Transitions
  - Loader

- ### Events

  - Swipe list items
  - Swipe page navigation

- ### Theme

  - Default theme
  - Classic theme
- Buttons

- ### Icons

  - Icons
  - Icons load script

- ### Toolbars

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - AJAX optimized toolbars
  - Form in toolbar
  - Navbar widget
- Tabs

- ### Panels

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popups

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page

- ### Collapsibles

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Listviews

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid

- ### Tables

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Filterable

- ### Forms

  - Forms
  - Forms gallery
  - Forms disabled
  - Field containers
  - Hide labels
  - Textinput
  - Input button
  - Checkboxes
  - Radio buttons
  - Selectmenu
  - Custom select menu
  - Custom select menu with filter
  - Slider
  - Slider flip toggle switch
  - Slider tooltip
  - Rangeslider
  - Flipswitch

- ### Controlgroups

  - Controlgroup
  - Dynamic controlgroups

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids

- ### 3rd party API

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle