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 ='';
    }

现在，您说日期选项会根据用户选择的金额值而改变，但您只提供了一组日期选项。我为每个货币值设置了一些日期选项，因此请使用格式dayOptions修改'moneyValue':[dayOption1,dayOption2,dayOption3]以满足您的需求。然后使用货币值制作一些Day无线电并将它们放入适当的字段集中。然后将click事件添加到新制作的无线电中。

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/

设置表以根据多个选择显示信息

1 个答案: