Question

我有两个表单输入：

<select id="inputA">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id="inputB">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<p>Your number is <span class="showUser"></span></p>

我正在寻找一个javascript或jquery函数，它返回并根据选择的值显示结果。

例如：

If inputA is 1 and inputB is 1, showUser "Alpha"  
If inputA is 1 and inputB is 2, showUser "Beta"  
If inputA is 1 and inputB is 3, showUser "Gamma"  
If inputA is 2 and inputB is 1, showUser "Delta"  
If inputA is 2 and inputB is 2, showUser "Epsilon"  
If inputA is 2 and inputB is 3, showUser "Zeta"  
If inputA is 3 and inputB is 1, showUser "Eta"  
If inputA is 3 and inputB is 2, showUser "Thea"  
If inputA is 3 and inputB is 3, showUser "Iota"

Answer 1

＆＃13;

var $a = $('#inputA');
var $b = $('#inputB');
var output = $('span');
var names = 'Alpha,Beta,Gamma,Delta,Epsilon,Zeta,Eta,Thea,Iota'.split(',');

$('select').on('change', function () {
  var a = parseInt($a.val(), 10);
  var b = parseInt($b.val(), 10);
  output.text(names[(a - 1) * 3 + b - 1]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="inputA">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id="inputB">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<p>Your name is <span class="showUser"></span></p>

＆＃13;

Answer 2

$(".input").on('change',function(){
   var val1='', val2='',id=$(this).attr("id");
   var arr=["Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta","Thea","Iota"];
   if( id=="inputA"){
      val1= $(this).val();
      val2= $('#inputB option:selected').val();
    }
   else{
     val1= $('#inputA option:selected').val();
     val2= $(this).val();
   }
   $(".showUser").html(arr[((Number(val1) - 1) * 3 + Number(val2))-1]);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input"  id="inputA">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<select class="input"   id="inputB">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<p>Your number is <span class="showUser"></span></p>

用于显示基于两个变量的结果的函数

2 个答案: