設置一個表中的信息取決於多重選擇

Question

顯示

我需要的是顯示一些信息取決於多個值或選擇

比如我需要選擇的貨幣（$ 1，$ 10，$ 50）中的金額，然後一段時間的時間（1天，10天，50天），並根據這兩個值顯示一些信息。

第二個值（時間）根據第一個值（金額）和最終信息而變化，取決於兩者的組合。

我是新來的JavaScript和HTML所以我真的有想法從哪裏開始，在此先感謝。

Answer 1

只要您的值都是靜態的，只需使用html和js即可。

HTML - 做一個點兩個選擇和結果：

<fieldset id="moneyRadios"> 
    <input id="oneDollar" type="radio" name="money" value="1"><label for="oneDollar">$1</label> 
    <input id="tenDollar" type="radio" name="money" value="10"><label for="tenDollar">$10</label> 
    <input id="fiftyDollar" type="radio" name="money" value="50"><label for="fiftyDollar">$50</label> 
</fieldset> 
<fieldset id="dayRadios"> 
</fieldset> 
<div id="result"></div> 

JS - 先點擊

var moneyInputs = document.getElementById('moneyRadios').getElementsByTagName('input'); 
    for (var i =0; i < moneyInputs.length; i++) 
    { 
     moneyInputs[i].addEventListener('click',moneyClicked, false); 
    } 

其次當錢電臺做一些事情，給它錢收音機是點擊並清除結果

function moneyClicked(moneyRadios) { 
     var moneySelected = document.querySelector('input[name = "money"]:checked').value; 
     setDayOptions(moneySelected);    
     document.getElementById('result').innerHTML =''; 
    } 

現在，你說當天的選項會改變依賴用戶選擇哪種金錢價值，但你只給了一套日期選項。我爲每筆貨幣價值選擇了一些日期選項，因此請使用格式'moneyValue':[dayOption1,dayOption2,dayOption3]修改dayOptions以滿足您的需求。然後使用貨幣價值製作一些天收音機，並將其放入適當的字段集。然後將點擊事件添加到新制作的收音機。

function setDayOptions(dollars){ 
     var dayOptions = {'1':[1,10,50], '10':[2,20,100], '50':[3,30,150]}; 
     var daysFieldset = document.getElementById('dayRadios'); 
     var selectedDayOptions = dayOptions[dollars]; 
     daysFieldset.innerHTML=''; 
     for (var i = 0; i < selectedDayOptions.length; ++i) { 

      var dayRad = document.createElement('input'); 
      dayRad.type='radio'; 
      dayRad.id='days'+selectedDayOptions[i]; 
      dayRad.name='day'; 
      dayRad.value=selectedDayOptions[i]; 

      var dayRadLabel = document.createElement('label'); 
      dayRadLabel.htmlFor='days'+selectedDayOptions[i]; 
      var labelText = document.createTextNode(selectedDayOptions[i]+' Days'); 
      dayRadLabel.appendChild(labelText);   

      daysFieldset.appendChild(dayRad); 
      daysFieldset.appendChild(dayRadLabel); 
     } 
     var dayInputs = document.getElementById('dayRadios').getElementsByTagName('input'); 
     for (var i =0; i < dayInputs.length; i++) 
     { 
      dayInputs[i].addEventListener('click',dayClicked, false); 
     } 
    } 

最後，點擊一天電臺時做點事情。您可以使用選定的值生成表格，或者顯示特定的預製表格或任何您喜歡的表格。我剛剛展示了這些選擇，並從中獲得了一定的利潤。

function dayClicked(){ 
     var moneySelected = document.querySelector('input[name = "money"]:checked').value; 
     var daysSelected = document.querySelector('input[name = "day"]:checked').value; 
     var rate = moneySelected/daysSelected; 
     document.getElementById('result').innerHTML = '<p>Money: $'+moneySelected+' Days: '+daysSelected+' is $'+rate+' per day</p>'; 
    } 

你可以看到所有的代碼在這裏工作：https://jsfiddle.net/fz44mpmo/4/