Сбой семантического интерфейса пользователя в меню настроек завершается неудачно - PullRequest
Новая
       7

Сбой семантического интерфейса пользователя в меню настроек завершается неудачно

0 голосов
/ 13 сентября 2018

Я пытаюсь изменить значения семантического сброса с помощью метода setup menu(values), но он не работает, когда я использую useLabels: false.

Пример.без useLabels: false

$(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('setup menu', {
      values: [{
          name: 'Alaska',
          value: 'AK'
        },
        {
          name: 'Arizona',
          value: 'AZ'
        },
        {
          name: 'Arkansas',
          value: 'AR'
        },
        {
          name: 'California',
          value: 'CA'
        }
      ]
    });
  })
})
<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>

Пример.с useLabels: false

Проблема в том, что он показывает, что он выбирает значение, но на самом деле это не так. 

$(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('setup menu', {
      values: [{
          name: 'Alaska',
          value: 'AK'
        },
        {
          name: 'Arizona',
          value: 'AZ'
        },
        {
          name: 'Arkansas',
          value: 'AR'
        },
        {
          name: 'California',
          value: 'CA'
        }
      ]
    });
  })
})
<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>

Или, возможно, проблема в чем-то другом, но что бы то ни было, я не получаю несколько значений (массив выбранных значений).

Любая помощь будет оценена.

Примечание: Я использую .net разорвать элементы управления для select, поэтому я не могу использовать div структурированный выпадающий список

Пример. 

@Html.DropDownList("", new { 
   @id = "ddPage", 
   @class="ui fluid dropdown search", 
   @multiple="" 
})

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Проверьте этот фрагмент, я пробовал разные способы, особенно документированные методы, но, похоже, ничего не получалось ... но если вы попробуете более основанный на javascript / jQuery подход, вы можете уничтожить выпадающий список, восстановить элемент select с помощью любого jQuery. или простой javascript, а затем повторно инициализировать выпадающий список, я также добавил вызов set placeholder text, я попытался вставить пустую опцию, но не сделал трюк, поэтому я использовал эту функцию вместо ... 

$(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>
0 голосов
/ 13 сентября 2018

3 вещи:

  1. CDN, похоже, устарел. Я нашел последнюю версию, глядя на эту проблему GitHub и нажимая на скрипку прямо в конце.
  2. В последней версии вам больше не нужно использовать 'setup menu' для обновления выбора.
  3. Это не имеет ничего общего с useLabels. Проблема, с которой вы сталкиваетесь, кажется разрешимой только тогда, когда я создал раскрывающийся список в формате, показанном в Примеры . 

$(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>
...