jquery - jQuery 更改 SELECT 无法正常工作

Question

（使用 jquery Mobile）我有一个重置按钮，需要将所有下拉框 selectedIndex 重置为 0。我相信索引回零，但选择框上显示的值不正确。它保持相同的值。

这是一个JSfiddle

例如：选择“unit2”，然后单击重置。单击确定。选择框上显示的值是“unit2”，而它应该是“--Units--”

HTML

<div data-role="fieldcontain" class='seltype' id='xmep' >
  <select id="dmep" data-mini='true'>
    <option value="0">--Units--</option>
    <option value='1'>unit1</option>
    <option value='0.01'>unit2</option>
    <option value='10'>unit3</option>
  </select>
</div>

.

.

查询

$(document).ready(function() {
  $('#rstBtn').click(function() {
     var answer = confirm('Click OK to set the selectIndex equal to 0');

        if (answer == false) {
            return;
        } else {
            $('select').prop('selectedIndex', 0);
        }
  });

});

Answer 1

您需要使用 刷新选择菜单.selectmenu('refresh',true)。

演示

$(document).ready(function() {
  $('#rstBtn').on('click', function() {
     if (confirm('Click OK to set the selectIndex equal to 0')) {
         $('#dmep').val(0).selectmenu('refresh',true);
         
     }
  });
});

这会更精确

  $('#dmep').find('option[value="0"]')
  .prop('selected', true).addBack()
   .selectmenu('refresh', true);

或者

   $('#dmep').prop('selectedIndex', 0)
   .selectmenu('refresh', true);

Answer 2

以这种方式工作：http: //jsfiddle.net/bWdGB/

使用此方法重置选择框：

$('select').val('0').attr('selected', true).siblings('option').removeAttr('selected');
$('select').selectmenu("refresh", true);