时间戳

首页 > 解决方案 > 语义 UI 下拉“设置菜单”失败

javascript - 语义 UI 下拉“设置菜单”失败

问题描述

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

标签： javascriptjqueryhtmlcsssemantic-ui

解决方案

检查这个片段，我尝试了各种方法，特别是记录的方法，但似乎没有任何工作......但如果你尝试更多基于 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>

推荐阅读