语义UI动态下拉

Question

语义UI下拉有问题。
我一直在使用Semantic-Ui，并且想要动态地改变下拉选项。 也就是说，当我从第一个下拉列表中选择值时，第二个下拉列表的项目将会改变。 但事情是，当项目更改时，第二个下拉菜单不能选择， 的值不会改变。下拉菜单不会倒退。

该HTML
第一个下拉

<div id="programmetype" class="ui fluid selection dropdown"> 
    <input type="hidden" name="programmetype"> 
    <div class="text">Choose..</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <div class="item" data-value="val1">Car</div> 
     <div class="item" data-value="val2">Tank</div> 
     <div class="item" data-value="val3">Plane</div> 
    </div> 
</div> 

第二个下拉

<div id="servicetype" class="ui fluid selection dropdown"> 
    <input type="hidden" name="servicetype"> 
    <div class="text">Choose..</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <div class="item" data-value="select">Choose..</div> 
    </div> 
</div> 

...................... ....
jQuery的

$("#programmetype").dropdown({ 
      onChange: function (val) { 
       if (val == "val1") 
       { 
        $('#servicetype .menu').html(
         '<div class="item" data-value="val1">Saloon</div>' + 
         '<div class="item" data-value="val2">Truck</div>' 
         ); 
       }; 

       if (val == "val2") 
       { 
        $('#servicetype .menu').html(
         '<div class="item" data-value="val1">Abraham</div>' + 
         '<div class="item" data-value="val2">Leopard</div>' + 
         ); 
       }; 

       if (val == "val3") 
       { 
        $('#servicetype .menu').html(
         '<div class="item" data-value="val1">Jet</div>' + 
         '<div class="item" data-value="val2">Bomber</div>' + 
         ); 
       }; 
      } 
     }); 

Answer 1

找到它， zzzz

我把$（'＃servicetype'）。dropdown（）; 分配值后。

$("#programmetype").dropdown({ 
       onChange: function (val) { 
        if (val == "fertility") 
        { 
         $('#servicetype').dropdown({'set value':'shit'}); 
         $('#servicetype .menu').html(
          '<div class="item" data-value="acp">ACP</div>' + 
          '<div class="item" data-value="art">ART</div>' 
          ); 
         $('#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 += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>'; 
    } 
    $(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

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

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

<div class="ui simple dropdown item"> 
    <i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i> 
    <div class="menu"> 
     <a class="item"><i class="fa fa-users"></i> Players</a> 
     <a class="item"><i class="fa fa-user-md"></i> Staff</a> 
    </div> 
</div> 

Answer 4

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

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