Geek Answers Handbook

Dynamic fallout of the semantic interface

There was a problem with a drop-down list of semantics.
I used Semantic-Ui and wanted to dynamically change the dropdown element. That is, when I select a value from the first drop-down list, the second item of the drop-down list will change. But the fact is that when the elements are changed, the second drop-down list cannot be selected, the value will not change. Drop-down list will not be reset.

HTML
First drop-down folder

<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>

Second Drop Folder

 <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>' + ); }; } });
+6
source share
4 answers

Found it, ZZZZ

i puts $ ('# servicetype'). dropdown (); after assigning values.

 $("#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(); }; });
+6
source

Workaround:

 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'}); } });

Try it.

+3
source

Another approach to setting up pop-up content just in time (for example, based on some dynamic criteria) is using remoteApi, which is a particularly bad name for SemanticUI pop-up data binding functions.

Follow the instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses

0
source

If you want to hover over the drop-down menu you do not need to use javascript, instead you can add a simple class to the parent div

This is a demo of 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>
-1
source

More articles:


All Articles