单击生成按钮 #2 随机播放多个选项值

Question

如果我有 8 个下拉列表，当仅单击 1 个按钮时随机播放值将选择随机值，但在每个下拉列表中值将不相同并且值的选择将分布在每个下拉列表中怎么办？

cshtml 选项值代码：

<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>
<div class="form-group">
    <select id="txtCupB" 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 class="form-group">
    <select id="txtCupC" 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 class="form-group">
    <select id="txtCupD" 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 class="form-group">
    <select id="txtCupE" 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 class="form-group">
    <select id="txtCupF" 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 class="form-group">
    <select id="txtCupG" 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 class="form-group">
    <select id="txtCupH" 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" />

脚本：

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();
var dropdown1 = $('#txtCupB');
dropdown1.empty();
var dropdown2 = $('#txtCupC');
dropdown2.empty();
var dropdown3 = $('#txtCupD');
dropdown3.empty();
var dropdown4 = $('#txtCupE');
dropdown4.empty();
var dropdown5 = $('#txtCupF');
dropdown5.empty();
var dropdown6 = $('#txtCupG');
dropdown6.empty();
var dropdown7 = $('#txtCupH');
dropdown7.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>'))
    dropdown1.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown2.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown3.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown4.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown5.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown6.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
    dropdown7.append(
        $('<option>', {
            value: item,
            text: item
        }, '</option>'))
});

});

我当前的问题： 价值的选择不会分布在每个下拉菜单中

我的期望： 当我点击生成按钮时，每个选项值都会打乱值并且每个下拉值都不会相同然后值的选择将分布在每个下拉列表中看起来像这样

Answer 1

“我当前的问题：值的选择不会分布在每个下拉列表中？”

As your dropdown has duplicate item in that case some item may be the same within the other dropdown list. Other than this can be achieved following below algorithm.

算法

 1.Get the each dropdown Id
 2.Get Each Dropdown List by Dropdown Id Item and Shuffle the array
 3.Get the each dropdown list by its Id (Repeat 2)
 4.Get Each Dropdown By its Id and make the older dropdown empty
 5.Loop through each Dropdown shuffled Item and populate each dropdownList

Asp.net核心观点

<table style="border-spacing: 50px;">

    <tr class="col-md-8">
        <td>
            <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>
        </td>
        <td>
            <div class="form-group">
                <select id="txtCupB" 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>
        </td>
    </tr>
    <tr>
        <td>
            <div class="form-group">
                <select id="txtCupC" 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>
        </td>
        <td>
            <div class="form-group">
                <select id="txtCupD" 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>
        </td>
    </tr>
    <tr>
        <td>
            <div class="form-group">
                <select id="txtCupE" 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>
        </td>
        <td>
            <div class="form-group">
                <select id="txtCupF" 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>
        </td>
    </tr>
    <tr>
        <td>

            <div class="form-group">
                <select id="txtCupG" 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>
        </td>
        <td>
            <div class="form-group">
                <select id="txtCupH" 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>
        </td>
    </tr>


</table>
<input type="submit" id="shuffleDropDown" value="GENERATE" style="width:164px" class="btn btn-primary" />

脚本与实现

@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(){

                      /*
                      ============
                       Algorithm
                      ============
                      1.Get the each dropdown Id
                      2.Get Each Dropdown List by Dropdown Id Item and Shuffle the array
                      3.Get the each dropdown list by its Id
                      4.Get Each Dropdown By its Id and make the older dropdown empty
                      5.Loop through each Dropdown shuffled Item and populate each dropdownList

                      */

                 //Loop through each dropdown and implement the algorithm
                 $("select").each(function(e,i){

                      //Get the each dropdown Id
                      var getEachDropdownId =  "#"+$(i).attr("id");

                      //getting the each dropdown list by its Id
                      var options = $(getEachDropdownId + " option");
                      var allDropdownList = $.map(options, e => $(e).val())

                      //Get Each Dropdown List Item and Shuffle the array
                      var shuffleddItemList  = funcArrayShuffle(allDropdownList);

                      //Getting Each Dropdown Id
                      var getEachDropdownId = $(i).attr("id");

                      //Set qoute on each Id for Making it as ID
                      var getEachDropdownId =  `#${getEachDropdownId}`

                      //Get Each Dropdown By its Id and make the older dropdown empty
                      var dropdown = $(getEachDropdownId);
                      dropdown.empty();

                      //Loop through each Dropdown shuffle Item and populate each dropdownList
                        $.each(shuffleddItemList, function (index, item) {
                           // console.log(index,item);
                            dropdown.append(
                                $('<option>', {
                                    value: item,
                                    text: item
                                }, '</option>'))
                              });


                  });//End of Each


      });// End Of BTN


        });// End Of Ready
</script>
        }

输出

希望它能相应地指导你，你正在努力实现什么。

单击生成按钮 #2 随机播放多个选项值

Shuffle multiple option value with one click generate button #2

javascript

c#

jquery

asp.net-core-mvc

asp.net-core