一键随机播放多个 select 菜单选项

Question

基本上我有8个期权价值。我想通过单击生成按钮随机生成每个选项的值。有什么建议吗？先感谢您 the UI like this

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

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

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>
        }

输出：

算法：

First Getting the current Dropdownlist

Making the current dropdown item shuffled

Removing current dowpdown item from existing node

Populating the new dropdown value with random item

希望它能相应地指导您尝试实现什么。

一键随机播放多个 select 菜单选项

Shuffle multiple select menu options with one click button

c#

jquery

asp.net

asp.net-mvc

asp.net-core