javascript - react - semantic ui transparent menu

Semántica-UI Dynamic Dropdown

Question

Tengo un problema con el menú desplegable de semántica ui.
He estado usando Semantic-Ui, y quería cambiar el elemento desplegable dinámicamente. Es decir, cuando elijo el valor del primer menú desplegable, el segundo elemento del menú desplegable cambiará. Pero la cosa es que cuando se cambian los artículos, no se puede elegir el segundo menú desplegable, el valor no cambiará. El menú desplegable no colapsará.

El HTML
El primer menú desplegable

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

Segundo menú desplegable

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

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

Lo encontré, zzzz

puse $ (''# tipo de servicio) dropdown (); después de asignar los valores.

$("#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

Un enfoque alternativo:

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

Prueba esto.

Answer 3

Si desea que el efecto de desplazamiento para abrir el menú desplegable no necesite usar javascript, puede agregar clase simple a su div principal

esta es una demo 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

Otro enfoque para configurar el contenido desplegable justo a tiempo (por ejemplo, basado en algunos criterios dinámicos) es usar remoteApi, que es un nombre particularmente desafortunado para las características de enlace de datos de los menús desplegables SemanticUI.

Siga las instrucciones aquí: http://semantic-ui.com/behaviors/api.html#mocking-responses