jQueryUI selectmenu - 设置选择的选项答案

【问题标题】：jQueryUI selectmenu - Set selected optionjQueryUI selectmenu - 设置选择的选项
【发布时间】：2018-12-04 23:59:39
【问题描述】：

如何在 jQueryUI 选择菜单上设置选中的选项？

我尝试在下面的屏幕截图中将第二个下拉菜单的值设置为“Prof”，然后再禁用它。

我试过这样：

$salutation.find('option').filter(function() {
    return ($(this).text().includes('Prof'));
}).prop('selected', true);

像这样：

$salutation.find('option').each(function() {
    var optionText = $(this).text();
    if (optionText.includes('Prof'))
        $(this).prop('selected', true);
});

都没有用。

完整示例：

$( function() {

  $( "#speed" ).selectmenu();
  $( "#salutation" ).selectmenu();
    
  $speed = $('#speed');
  $salutation = $('#salutation');
  test();
  

  $speed.on('selectmenuchange', function() {
	    test();
  });

  
  function test()
  {
      let selectedOption = $speed.find('option:selected').text().trim().toLowerCase();

      if ( ! selectedOption.includes('fast')) {
        
        $salutation.find('option').filter(function() {
            return ($(this).text().includes('Prof'));
        }).prop('selected', true);
        
        $salutation.selectmenu('disable');
        $salutation.selectmenu('refresh');
        
      } else {
        $salutation.selectmenu('enable');
      }
  }
  
});

fieldset {
  border: 0;
}
label {
  display: block;
  margin: 30px 0 0 0;
}
.overflow {
  height: 200px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


 
<div class="demo">
 
<form action="#">
 
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
  
    <label for="salutation">Select a title</label>
    <select name="salutation" id="salutation">
      <option disabled selected>Please pick one</option>
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Other</option>
    </select>
  </fieldset>
</form>
</div>

【问题讨论】：

标签： jquery-ui jquery-ui-selectmenu

【解决方案1】：

我找到了解决方案。我不得不在$salutation.selectmenu('disable'); 之后打电话给$salutation.selectmenu('refresh');

http://api.jqueryui.com/selectmenu/#method-refresh

$( function() {

  $( "#speed" ).selectmenu();
  $( "#salutation" ).selectmenu();
    
  $speed = $('#speed');
  $salutation = $('#salutation');
  test();
  

  $speed.on('selectmenuchange', function() {
	    test();
  });

  
  function test()
  {
      let selectedOption = $speed.find('option:selected').text().trim().toLowerCase();

      if ( ! selectedOption.includes('fast')) {
        
        $salutation.find('option').filter(function() {
            return ($(this).text().includes('Prof'));
        }).prop('selected', true);
        
        $salutation.selectmenu('disable');
        $salutation.selectmenu('refresh');
        
      } else {
        $salutation.selectmenu('enable');
      }
  }
  
});

fieldset {
  border: 0;
}
label {
  display: block;
  margin: 30px 0 0 0;
}
.overflow {
  height: 200px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


 
<div class="demo">
 
<form action="#">
 
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
  
    <label for="salutation">Select a title</label>
    <select name="salutation" id="salutation">
      <option disabled selected>Please pick one</option>
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Dr.</option>
      <option>Prof.</option>
      <option>Other</option>
    </select>
  </fieldset>
</form>
</div>

【讨论】：