语义UI动态下拉列表

semantic-ui下拉有问题。
我一直在使用Semantic-Ui，并希望动态更改下拉项。 也就是说，当我从第一个下拉列表中选择值时，第二个下拉列表的项目将会更改。 但问题是，当项目发生变化时，无法选择第二个下拉列表，该值不会改变。 下拉列表不会倒退。

HTML
第一次下拉

  
Choose..
  
 
Car
 
Tank
 
Plane
 
  

第二次下拉

 
  
Choose..
  
 
Choose..
 
  

……………………..
jQuery

 $("#programmetype").dropdown({ onChange: function (val) { if (val == "val1") { $('#servicetype .menu').html( '
Saloon
' + '
Truck
' ); }; if (val == "val2") { $('#servicetype .menu').html( '
Abraham
' + '
Leopard
' + ); }; if (val == "val3") { $('#servicetype .menu').html( '
Jet
' + '
Bomber
' + ); }; } }); 

Answer 1

发现它，zzzz

我把$（’＃servicetype’）。dropdown（）; 在分配值之后。

 $("#programmetype").dropdown({ onChange: function (val) { if (val == "fertility") { $('#servicetype').dropdown({'set value':'shit'}); $('#servicetype .menu').html( '
ACP
' + '
ART
' ); $('#servicetype').dropdown(); }; }); 

Answer 2

解决方法：

 function setDinamicOptions(selector, options) { var att = "data-dinamic-opt"; $(selector).find('[' + att + ']').remove(); var html = $(selector + ' .menu').html(); for(key in options) { html += '
' + key + '
'; } $(selector + ' .menu').html(html); $(selector).dropdown(); } $("#programmetype").dropdown({ onChange: function (val) { if (val == "val1") setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'}); if (val == "val2") setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'}); if (val == "val3") setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'}); } }); 

试试这个。

Answer 3

另一种及时设置下拉内容的方法（例如基于某些动态标准）是使用remoteApi，这是SemanticUI下拉列表的数据绑定function的一个特别不幸的名称。

按照以下说明操作： http ： //semantic-ui.com/behaviors/api.html#mocking-responses

Answer 4

如果你想hover效果打开下拉菜单，那么你不需要使用javascript，而是你可以添加类简单到你的父div

这是一个演示http://jsfiddle.net/BJyQ7/30/

 
  Members  
  Players  Staff