2017-08-07 57 views
0

一个结果,我有两个表单输入:功能显示基于两个变量

<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" 
+1

这看起来像一个非常微不足道的功能。你有没有尝试过自己?以“为我工作”为主题的问题往往很快就会从网站downvoted –

+0

@凯我只是不知道如何实际比较两个变量 - 如果你不介意告诉我如何做一个,我会删除这篇文章! – Jonathan

+0

请勿删除帖子。如果你有一个有效的答案,它可以帮助其他人下线,建立你自己的代表,以便你在未来的网站上更认真地对待 –

回答

0

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]); 
 
});
<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>

0

$(".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>