javascript - 语义 UI 下拉列表 'setup menu' 失败

Question

我正在尝试使用 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="" 
})

Answer 1

检查这个片段，我尝试了各种方法，尤其是记录的方法，但似乎没有任何效果......但是如果你尝试更多基于 javascript/jQuery 的方法，你可以破坏下拉列表，使用 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>