以图形方式重置选择框

Question

Using jquery mobile, I am trying to reset a form

I am using the following:

$('form').prop('selectedIndex',0);

The value the select submits does reset to zero, but the image stays as it is.

Answer 1

Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview's refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

Refreshing form elements
In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom controls (selects, sliders) built from, and kept in sync with, the native control. To programmatically update a form control with JavaScript, first manipulate the native control, then use the refresh method to tell the enhanced control to update itself to match the new state. Here are some examples of how to update common form controls, then call the refresh method:

• http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html

Checkboxes:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Radios:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

Selects:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Sliders:

$("input[type='range']").val(60).slider("refresh");

Flip switches (they use slider):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

try:

$('form').prop('selectedIndex',0);
$('form').trigger('create');

Or if this is a drop down select

• http://jquerymobile.com/demos/1.0.1/docs/forms/selects/methods.html

JS

$('form').prop('selectedIndex',0);
//refresh value         

$('select').selectmenu('refresh');

//refresh and force rebuild 
$('select').selectmenu('refresh', true);

Answer 2

假设您在select上有一个change事件...以编程方式更改索引后，调用change事件。

Answer 3

Assuming a select box like:

<select name="opt1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

You can select the option you want like:

$("select").val("3");