用一个单击按钮洗牌多个选择菜单选项

Question

基本上我有8个期权价值。我希望通过单击generate按钮随机生成每个选项的值。有什么建议吗？谢谢你提前像这样的UI

cshtml代码：

<div class="col-xs-8">
                        <div class="form-group">
                            <select name="" id="txtCupA" class="form-control">
                                <option value="SWEET">SWEET</option>
                                <option value="SOUR">SOUR</option>
                                <option value="SALTY">SALTY</option>
                                <option value="BITTER">BITTER</option>
                                <option value="UMAMI">UMAMI</option>
                                <option value="WATER">WATER</option>
                                <option value="WATER">WATER</option>
                                <option value="WATER">WATER</option>
                            </select>
                        </div>
                    </div>

Answer 1

我希望通过单击generate按钮随机生成每个选项的值。有什么建议吗？

您可以按照以下步骤操作：

Asp.net核心视图：

<div class="col-xs-8">
    <div class="form-group">
        <select id="txtCupA" class="form-control">
            <option value="SWEET">SWEET</option>
            <option value="SOUR">SOUR</option>
            <option value="SALTY">SALTY</option>
            <option value="BITTER">BITTER</option>
            <option value="UMAMI">UMAMI</option>
            <option value="WATER">WATER</option>
            <option value="WATER">WATER</option>
            <option value="WATER">WATER</option>
        </select>
    </div>

    <input type="submit" id="shuffleDropDown" value="Suffle Value" class="btn btn-primary" />
</div>

脚本：

@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
 
  $(document).ready(function() {

    function funcArrayShuffle(array) {

        var currentIndex = array.length,
            temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }


    $("#shuffleDropDown").click(function() {

        //Getting the current dropdown List
        var options = $('#txtCupA option');
        var values = $.map(options, e => $(e).val())

        //Make It random
        var shuffleddItemList = funcArrayShuffle(values);

        //Made the older drowdownList empty
        var dropdown = $('#txtCupA');
        dropdown.empty();

        //Loop through the Shaffle array item and made the New Random Dropdown List
        $.each(shuffleddItemList, function(index, item) {
            console.log(index, item);
            dropdown.append(
                $('<option>', {
                    value: item,
                    text: item
                }, '</option>'))
        });
    });


});


</script>
        }

输出：

​

​

算法：

1. 首先得到当前的Dropdownlist列表
2. 使当前下拉项目被洗牌
3. 从现有节点中移除当前的下压项
4. 用随机项填充新的下拉值