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重建select元素或普通的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>

Answer 2

3件事：

CDN似乎已过时。在查看此GitHub issue并单击最后的fiddle时，我找到了最新的。
在最新版本中，您不再需要使用'setup menu'来更新选择内容。
与useLabels无关。仅当我以Examples中所示的格式创建下拉菜单时，您面临的问题才可以解决。

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

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

2 个答案: