how to do different things with each droplist chioce? HTML

Question

I am creating tax calculator and when the user chooses an option from the drop list choices i want to create a way that each choice will do a different formula in my function. so if the user picks choice 1 it will do formula 1, if they choose option 2 it will do formula 2 so on and so forth. I tried doing so but it forces the last choice every time.

Aswad Sohail · Answer 1 · 2014-11-28T09:23:14.877

0

You can try something like that:

<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>

edited Nov 28 '14 at 09:23

answered Nov 28 '14 at 07:47

Aswad Sohail

34
7

i am also doing other things within this function so when add this line you are saying "document.getElementById("test").onchange = function(){" will it afect with the other things that i do in it> – user3630455 Nov 28 '14 at 07:52
why don't you add those things in that function? Won't it work? – Aswad Sohail Nov 28 '14 at 09:25

Deepak Goswami · Answer 2 · 2014-11-28T08:00:11.670

0

You can use something like this:

<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>

Please find the demo link below:

DEMO

I hope this helps you. :)

edited Nov 28 '14 at 08:00

answered Nov 28 '14 at 07:52

Deepak Goswami

2,030
1
16
22

where did "change" come from near the top? – user3630455 Nov 28 '14 at 07:56
@user3630455 'change' is an jQuery inbuilt event function that invoked or call on change/select choices from drop down... I hope this makes you sense. – Deepak Goswami Nov 28 '14 at 07:59
I have updated my answer with Demo link which show you how change will works. – Deepak Goswami Nov 28 '14 at 08:01
# is and "element id" selector which is used for selecting and an html element for performing js/jquery actions on it for our case "myDropdownId" is ID of your choices drop down on which I have deifined 'change' event that calls when user select an choice option from the list.. – Deepak Goswami Nov 28 '14 at 08:05
can i show you my code in private? i implemented what you said to do but I'm getting the same result. – user3630455 Nov 28 '14 at 08:07
yes you can show me. but I am seeing that your repo points at stack-overflow is very low so you cant chat with me on stack. – Deepak Goswami Nov 28 '14 at 08:09
you can do one thing that update your question with your code that you are using. – Deepak Goswami Nov 28 '14 at 08:11
@user3630455: Please accept my answer and vote it up if my solution works for you. :) – Deepak Goswami Nov 28 '14 at 09:37

how to do different things with each droplist chioce? HTML

2 Answers2