CODEWITHSUNDEEP
javascripthtmldrop-down-menu
RFM_Euan
RFM_Euan

Reputation: 15

Calling Javascript functions with HTML dropdowns

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>

Upvotes: 0

Views: 55

Answers (4)

Ranjeet
Ranjeet

Reputation: 8072

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);
     }

Upvotes: 1

guest271314
guest271314

Reputation: 1

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>

Upvotes: 1

gbalduzzi
gbalduzzi

Reputation: 10166

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

Upvotes: 1

gon250
gon250

Reputation: 3545

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.

Upvotes: 1

Related Questions