使用HTML下拉菜单调用Javascript函数

Question

I've been trying to call functions from a drop-down menu, but for some reason only shift(CPL) seems be called. I have verified that the functions themselves are working, and have redacted those for easier reading. I'm very new to Javascript and may have made a fairly basic error, apologies for that and thanks in advance!

HTML:

<select onchange="shift(this.value);">
  <option value="CPM">CPM</option>
  <option value="CPC">CPC</option>
  <option value="CPL">CPL/A</option>
</select>

Javascript:

function shift(CPM) {

}

function shift(CPC) {

}

function shift(CPL) {

}


</script>

Answer 1

I think you didn't really understand how functions work in programming languages, i recommend you to study a little more and follow guides before trying to create something new.

Basically, you don't have to create 3 different shift function: one is more then enough: only the parameter will change. try this code:

function shift (genericParameter) {
  if (genericParameter == 'CPM') {
     //CPM
  } else if (genericParameter == 'CPC') {
     //CPC
  } else if (genericParameter == 'CPL') {
    //CPL
  }
}

Answer 2

For how to do it in jquery :

DEMO

js code:

$(document).ready(function(){

  $('select').on('change', function() {
   shift(this.value);
  });

});

function shift(yourValue) {
    alert(yourValue) //Implement what you need here. 
}

//or maybe you prefer this:

function shift(yourValue) {
    switch(yourValue) {
        case 'CPM':
            //code block
            break;
        case 'CPC':
            //code block
            break;
        case 'CPL':
            //code block
            break;
        default:
            default code block
    }
}

hope it's helps.

Answer 3

Try creating an object having properties of select values , at selection do stuff corresponding to property name of object

 var selected = { "CPM":"option 1", "CPC": function(v) { return v.toLowerCase() }, "CPL": "option 3" } function shift(val) { var res = typeof selected[val] === "function" ? selected[val](val) : selected[val]; alert(res) } 

 CPM <select onchange="shift(this.value);"> <option value="CPM">CPM</option> <option value="CPC">CPC</option> <option value="CPL">CPL/A</option> </select> 

Answer 4

i think your missing just syntax , this can help you..

enter code here

<select id="selectDrop" onchange="copy();">
    <option value="">Default:</option>
    <option value="one" >one</option>
    <option value="two" >two</option>
    <option value="three" >three</option>
  </select>

JavaScript :-

  function copy(){
     alert(document.getElementById("selectDrop").value);
     }