JSON获取从数组到文本输入html的唯一随机值，并在显示所有值时显示文本 [英] JSON get unique random values from array to text input html and show a text when all values are shown

问题描述

这是我的选项代码和文本框

Here is my option code and text box

  <select id="sel" class="form-control input-lg" data-live-search="true">
    <option  value="">-- Select Your Country--</option>
    </select><br/><br/><br/>

<input type = "text" id = "txtName" class="form-control input-lg" />
</div>

这是我的JSON代码

[  
    {  
      "country":"First",
      "coupon":["1","10","11"]
    },
    {  
      "country":"Second",
      "coupon":"2"
    },
    {  
      "country":"third",
      "coupon":"3"
    },
    {  
      "country":"fourth",
      "coupon":"4"
    },
    {  
      "country":"fifth",
      "coupon":"5"
    }
  ]

我已将JSON填充到下拉列表中并显示在文本(输入)框中

i have populated JSON to dropdown and shown to text (input) box

$('#sel').append('<option value="' + value.coupon + '">' + value.country + '</option>');

        $('#sel').change(function () {
var str = $("#sel").val();
        $("#txtName").val(str);
}

我需要的是在下拉列表中选择具有三个数字["1"，"10"，"11"]的值"First" 我需要在文本框中随机显示一次"1"，"10"或"11".此外，每次搜索中文本框中的值都必须是唯一的，并且当显示所有数字时，它必须显示一条文本消息否优惠券".

What i need is when i select the value "First" in dropdown which has 3 numbers ["1","10","11"] i need to show either "1" or "10" or "11" at a time in text box randomly.Also the values in the textbox must be unique on each search and when all numbers are shown it must display a text message "No Coupon" in text box.

我使用下面的代码随机生成了它，但是我没有得到想要的结果.有人可以帮我吗?

I used below code to randomly generate it but i couldn't get desired result.Could anyone help me ?

Array.prototype.random = function (length) {
       return this[Math.floor((Math.random()*length))];
 }
// var randomcoupon = value.coupon.random(value.coupon.length);

推荐答案

一种方法是保留列表的引用(如下面提到的代码中的firstCouponOptions)，并且每次从在文本框"中显示它，并同时从firstCouponOptions列表中删除该值.空时，显示没有优惠券"消息.

One way would be to keep a reference of the list (firstCouponOptions as in the below mentioned code) and each time a random value is fetched from firstCouponOptions show it in the "text box" and remove the value from the firstCouponOptions list at the same time. When it is empty, show "No coupon" message.

const options = [
  { "country": "First", "coupon": ["1", "10", "11"] },
  { "country": "Second", "coupon": "2" },
  { "country": "third", "coupon": "3" },
  { "country": "fourth", "coupon": "4" },
  { "country": "fifth", "coupon": "5" }
];

function getRandomValueFromList(list) {
  const randomeIndex = Math.floor(Math.random() * (list.length));
  return list[randomeIndex];
}

$(function() {
  const firstCouponOptions = options[0].coupon;
  options.forEach((value) => {
    $('#sel')
      .append('<option value="' + value.coupon + '">' + value.country + '</option>');
  });

  $('#sel').change(function() {
    let str = $("#sel").val();
    if ($("#sel option:selected").text() === 'First') {
      if (firstCouponOptions.length) {
        str = getRandomValueFromList(firstCouponOptions);
        firstCouponOptions.splice(firstCouponOptions.indexOf(str), 1);
      } else {
        str = "No Coupon";
      }
    }
    console.log(str);
    $("#txtName").val(str);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel" class="form-control input-lg" data-live-search="true">
  <option value="">-- Select Your Country--</option>
</select>

<input type="text" id="txtName" class="form-control input-lg" />

这篇关于JSON获取从数组到文本输入html的唯一随机值，并在显示所有值时显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！