Semantic-UI下拉框【dropdown】set selected不起作用

2019-05-08 196 Lei 0

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Semantic-UI是一款前端开发框架,类似于Bootstrap。Dropdown是该框架的一种组件。set selected是dropdown控件的一个behavior,可以将控件设置为指定的值。

用法为 $('.ui .dropdown').dropdown('set selected', '指定的值');

问题

在某种特殊情况下:

Dropdown下的两个option——optionA和optionB,optionA的value和optionB的text是一致的,都是x,这个时候set selected为x,会导致dropdown实际上选中的是optionA和optionB中靠后的那个的BUG。

问题复现

1.首先我们先来看一下正常情况:

<select class="ui search dropdown" id="search-select">
 <option value="11">11</option>
 <option value="0">0</option>
 <option value="10">10</option>
</select>

这个时候我们看到默认是选中了11,如下:

2.然后我们使用set selected来设置一个值:

$('#search-select').dropdown('set selected', '0'); //设置选中的值
<em>alert</em>('将值设置为了:'+$('#search-select').dropdown('get value')); //查看一下结果

我们期望的结果是选中0,实际结果如下:

Dropdown如下:

到目前为止,一切都符合我们的预期。

3.最后,我们来看一下特殊情况。我们将option修改一下,让其中一个option的value等于另一个option的text。如下:

<select class="ui search dropdown" id="search-select">
 <option value="11">11</option>
 <option value="10">0</option>
 <option value="6">10</option>
</select>

我们依然设置一个我们期望的值:

$('#search-select').dropdown('set selected', '10');
<em>alert</em>('将值设置为了:'+$('#search-select').dropdown('get value'));

运行之后结果如下:

我们期望的是选中<option value="10">0</option>,但实际上选中的却是<option value="6">10</option>,不符合预期。

解决方法

当这种情况出现时,我们使用set value和set text来代替set selected。

将JS代码由:

$('#search-select').dropdown('set selected', '10');
<em>alert</em>('将值设置为了:'+$('#search-select').dropdown('get value'));

修改为:

$('#search-select').dropdown('set value', '10');
$('#search-select').dropdown('set text', '0');
<em>alert</em>('将值设置为了:'+$('#search-select').dropdown('get value'));

得到的结果是:

一切都符合我们的预期了。


  0