文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >只需单击“生成”按钮#2，就可以洗牌多个选项值。

问只需单击“生成”按钮#2，就可以洗牌多个选项值。
EN

Stack Overflow用户
提问于 2022-05-25 02:47:41
回答 1查看 232关注 0票数 1

如果我有8个下拉列表，只要单击1个按钮，洗牌值就会选择随机值，但是在每个下拉列表中，值的选择将分散在每个下拉列表中。

cshtml选项值代码:

代码语言：javascript
复制
<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" />

脚本:

代码语言：javascript
复制
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>'))
});

})；

我现在的问题:价值的选择不会分散在每一个下拉列表中

​

​

我的期望:当我单击“生成”按钮时，每个选项值将洗牌值，每个下拉列表值将不相同，则值的选择将分散到每个下拉列表上，如下所示

​

​

javascript
c#
jquery
asp.net-core
asp.net-core-mvc
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-25 07:07:14

我现在的问题:价值的选择不会分散在每一个下拉列表中？

因为您的下拉列表中有重复的项，所以在其他下拉列表中，有些项可能是相同的。除此之外，还可以按照以下算法实现：

算法

dropdownList

  1. 获取每个下拉Id
  2. ，根据下拉Id项获取每个下拉列表，并根据其Id (重复2)获取每个下拉列表(重复2)
  3. 按其Id获取每个下拉列表，并使较旧的下拉列表空出

H 113循环遍历每个下拉洗牌项目并填充每个

Asp.net核心视图

代码语言：javascript
复制
<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" />

脚本和实现：

代码语言：javascript
复制
@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>
        }

输出：

​

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72371461

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档