jQueryUI selectmenu-设置所选选项

Question

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

在尝试禁用以下屏幕截图后，我尝试将第二个下拉菜单的值设置为“教授”。

我这样尝试过：

public class RecyclerAdapterSeeAll extends RecyclerView.Adapter<RecyclerAdapterSeeAll.MyViewHolder>{

    private List<ModelHappySeeAll> modelHappySeeAlls;
    private Context context;
    private int id = 0;
    private String status = "";

    public RecyclerAdapterSeeAll( Context context, List<ModelHappySeeAll> modelHappySeeAlls) {
        this.modelHappySeeAlls = modelHappySeeAlls;
        this.context = context;
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item_see_all, parent, false);
        return  new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {

        holder.tvName.setText(modelHappySeeAlls.get(position).getName());
        holder.tvDetails.setText(modelHappySeeAlls.get(position).getDetails());

        holder.setItemClickListener(new ItemClickListener() {
            @Override
            public void onItemClick(int pos) {


            }
        });



    }

    @Override
    public int getItemCount() {
        return modelHappySeeAlls.size();
    }


    public class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
        TextView tvName, tvDetails;
        ItemClickListener itemClickListener;

        public MyViewHolder(View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.textview_name_see_all);
            tvDetails = itemView.findViewById(R.id.textview_happy_post_see_all);
        }

        public void setItemClickListener ( ItemClickListener itemClickListener){
            this.itemClickListener = itemClickListener;
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            this.itemClickListener.onItemClick(this.getLayoutPosition());
        }
    }

}

并这样：

$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;
}

Answer 1

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

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>