如何使用每个下拉列表选项做不同的事情? HTML

时间:2014-11-28 07:27:50

标签: html dropdownbox dropdownchoice

我正在创建税收计算器,当用户从下拉列表选项中选择一个选项时,我想创建一种方法,每个选项将在我的函数中执行不同的公式。因此,如果用户选择选项1,它将执行公式1,如果他们选择选项2,它将执行公式2,依此类推。我试过这样做,但它每次都迫使最后的选择。

2 个答案:

答案 0 :(得分:0)

你可以尝试这样的事情:

<select id="test">
     <option value=1>Sum</option>
     <option value=2>Difference</option>
</select>

<script>
document.getElementById("test").onchange = function(){
     var test = document.getElementById("test");
     switch(test.options[test.selectedItem].value){
          case 1:
               add();
          break;

          case 2:
               sub();
          break;
     }
}
</script>

答案 1 :(得分:0)

您可以使用以下内容:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<select id="myDropdownId">
    <option value="">--choices--</option>
    <option value="1" >formula 1</option>
    <option value="2" >formula 2</option>
    <option value="3" >formula 3</option>
    <option value="4" >formula 4</option>
</select>
<script type="text/javascript">
    $(document).on("change", "#myDropdownId", function() {
        var actionId=$(this).val();

        if (actionId==1) {
            alert('formula 1');
            //formula 1 goes here..
        } else if (actionId==2) { 
            //formula 2 goes here..
        } else if (actionId==3) {
            //formula 3 goes here..
        } else if (actionId==4) {
            //formula 4 goes here..
        } else {
            alert('inavlid formula');
        }
    });
</script>

请在下面找到演示链接:

DEMO

我希望这会对你有所帮助。 :)