Question

作为一名JS新手，我需要以下方面的帮助：我想创建一个3步骤的小程序：

让用户从选择框（水果或蔬菜）中选择列表
让用户选择他想看的项目数（x）
展示x项水果或蔬菜

如您所见，第2步和第3步工作正常，我的问题是关于第1步：

如何将所选选项作为参数传递给函数，就像第二个参数（元素数）由用户输入中的数字设置一样。

欢迎所有帮助。提前谢谢。

＆＃13;

// The arrays to choose
var fruit = ['Apple', 'Banana', 'Mango', 'Apricot'];
var vegetable = ['Brussels sprout', 'Broccoli', 'Potato', 'Tomato']

///////////////////// RANDOM ARRAY ELEMENT SELECTION

function getRandomArrayElements(arr, a) {
    var shuffled = arr.slice(0), i = arr.length, min = i - a, temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}

// use an eventlistener for the click event
var genElementsdBtn = document.getElementById('genBtn');
genElementsdBtn.addEventListener('click', getElements, false);

function getElements() {
    document.getElementById('result').innerHTML = 
    getRandomArrayElements(fruit, a.value).join("   ");
    /* document.getElementById('divalert').className = 'show'; */   
}

＆＃13;

.wrapper {width:320px; margin: 0 auto}
select, label, button, input, div  {
  width:100%; 
  height:45px;
  margin:16px 0;
 }

＆＃13;

<div class="wrapper">
<select id="selectList">
  <option value="">choose your array</option> 
  <option value="fruit" id="fruit">fruit</option>
  <option value="vegetables" id="vegetables">vegetables</option>
</select>

<label>select number of random elements from the chosen list</label>

<input type="number" placeholder="set a number" id="a"><br>
<button id='genBtn' type='button'>generate random array elements</button>

<div id="result"></div>
</div>

＆＃13;

Answer 1

你可以得到这样的当前价值：

＆＃13;

$autoload['model'] = array('User_model','Material_model');
$autoload['libraries'] = array('database','form_validation');


class services extends CI_Controller {
public function service1()
{

  $this->form_validation->set_rules('type','Type',trim|required);
  $this->form_validation->set_rules('area','Area',trim|required);
  $this->form_validation->set_rules('quantity','Quantity',trim|required);
  $this->form_validation->set_rules('details','Details',trim|required);
  $this->form_validation->set_rules('name','Name',trim|required);
  $this->form_validation->set_rules('number','Number',trim|required);
  $this->form_validation->set_rules('location','Location',trim|required);
if($this->form_validation->run()==FALSE){
            $data['main_view']="page_view";
$this->load->view('layouts/main',$data);
} else{
$this->user_model->create_user();
redirect('/');
}

＆＃13;

let selectList = document.getElementById("selectList");
let currentValue;
selectList.addEventListener("change", function(e){
    currentValue = e.target.value;
    console.log(currentValue);
});

＆＃13;

Answer 2

＆＃13;

var fruits = ['apple', 'banana', 'cherry', 'orange', 'watermelon', 'lemon'];
var veggies = ['carrots', 'eggplant', 'pumpkin', 'tomateos', 'potatoes'];



$('#btn').click(function() {
  var choice = $('#food').val();
  var count = $('#txt_number').val();
  
  get_food(choice, count);

});

function get_food(choice, count) {
  $('#result').html('');

  for (var i = 0; i < count; i++) {
    $('#result').append((choice == 'fruit') ? fruits[i] : veggies[i]).append(" ");
  }


}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id='food'>
  <option value='fruit'>Fruits</option>
  <option value='veggies'>Vegetables</option>
 </select>


<input type='text' id='txt_number' />

<button id='btn'>Get food</button>

<div id='result'></div>

＆＃13;

使用选定的选项作为函数内的参数

2 个答案: