2017-08-07 88 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>