El ‘menú de configuración’ de la interfaz de usuario semántica falla

Solución:

Verifique este fragmento, probé de varias maneras, especialmente los métodos documentados, pero nada parecía funcionar … pero si prueba un enfoque más basado en javascript / jQuery, puede destruir el menú desplegable, reconstruir el elemento de selección con jQuery o javascript simple y luego reinicializar el menú desplegable, también agregué un set placeholder textllamada, intenté insertar una opción vacía pero no hice el truco, así que usé esa función en su lugar …

$(document).ready(function() {
    $('.ui.dropdown').dropdown({
        //useLabels: false,
        onChange: function(value, text, $selectedItem) {
            console.clear();
            console.log(value);
        }
    });
    
    
    $('.ui.button').on('click', function() {
        
        $('#select').dropdown("clear"); // clear dropdown
        $('#select').html(""); // Empty the select
        $('#select').dropdown("destroy"); // Destroy dropdown
        $('#select').dropdown("set placeholder text", 'New Placeholder'); // Set new placeholder
        
        var selectValues = { "AK": "Alaska", "AZ": "Arizona", "CA": "California" }; // define new values
        // populate select
        $.each(selectValues, function(key, value) {   
            $('#select')
            .append($("<option></option>")
            .attr("value",key)
            .text(value)); 
        });
        
        // call your original dropdown definition again
        $('.ui.dropdown').dropdown({
            //useLabels: false,
            onChange: function(value, text, $selectedItem) {
                console.clear();
                console.log(value);
            }
        });

        console.clear(); // CLEAR CONSOLE
        console.log($('#select').dropdown('get value'));  // GET CURRENT SELECTED VALUE WHICH SHOULD BE NULL

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>


<select name="gender" class="ui  dropdown" multiple id="select">
  <option value="">Gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
<p></p>
<button class="ui button" type="button">Reset values</button>

3 cosas:

1. El CDN parece estar desactualizado. Encontré lo último mientras miraba este problema de GitHub y hacía clic en el violín justo al final.
2. En la última versión, ya no es necesario utilizar 'setup menu' para actualizar la selección.
3. No tuvo nada que ver con useLabels. El problema al que se enfrenta parece solucionable solo cuando creé un menú desplegable en el formato que se muestra en los Ejemplos.

$(document).ready(function() {
  $('.ui.dropdown').dropdown({
    //useLabels: false,
    onChange: function(value, text, $selectedItem) {
      console.clear();
      console.log(value);
    }
  });
  $('.ui.button').on('click', function() {
    $('#select').dropdown({
      useLabels : false,
      onChange: function(value, text, $selectedItem) {
        console.clear();
        console.log(value);
      },
      values: [{
          name: 'Alaska',
          value: 'AK'
        },
        {
          name: 'Arizona',
          value: 'AZ'
        },
        {
          name: 'Arkansas',
          value: 'AR'
        },
        {
          name: 'California',
          value: 'CA'
        }
      ]
    });
  })
})

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>



<button class="ui button" type="button">Reset values</button>


<div id="select" class="ui fluid multiple special selection dropdown">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
<div class="item" data-value="ad"><i class="af flag"></i>ad</div>
<div class="item" data-value="as"><i class="af flag"></i>as</div>
</div>
</div>

---

---

Utiliza Nuestro Buscador