3 Replies - 535 Views - Last Post: 20 July 2014 - 07:45 PM

#1 AnthonyGuevara  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Handle drop down menu selections

Posted 20 July 2014 - 06:04 PM

I am trying to handle selections from a drop down menu. Say if I chose two, I would like to act accordingly. For now I would like to show an alert box. How would I check which option was selected? Thank you.

<form method="get"> 
 <select class="helpSelector">
  <option id="Null" value="0">Select Topic</option>
  <option id="one" value="1">one</option>
  <option id="two" value="2">two</option>
  <option id="three" value="3">three</option>
 </select>
</form>



Is This A Good Question/Topic? 0
  • +

Replies To: Handle drop down menu selections

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3824
  • View blog
  • Posts: 13,556
  • Joined: 12-December 12

Re: Handle drop down menu selections

Posted 20 July 2014 - 06:20 PM

You can use the change event of the select element.

However, to get you started, you can use the onchange attribute to produce an alert:
<form method="get"> 
 <select class="helpSelector" onchange="testIt(this.value);">
  <option id="Null" value="0">Select Topic</option>
  <option id="one" value="1">one</option>
  <option id="two" value="2">two</option>
  <option id="three" value="3">three</option>
 </select>
</form>

<script>
function testIt(val) {
    alert(val);
}
</script>

EventTarget.addEventListener :MDN. This is the more modern, and recommended, approach:

<form method="get"> 
 <select class="helpSelector" id="help">
  <option id="Null" value="0">Select Topic</option>
  <option id="one" value="1">one</option>
  <option id="two" value="2">two</option>
  <option id="three" value="3">three</option>
 </select>
</form>

<script>
document.getElementById('help').addEventListener('change', testIt, false);

function testIt() {
    alert(this.value);
}
</script>

Off course, you'll need to start your study of Javascript to make some sense of these codes.

This post has been edited by andrewsw: 20 July 2014 - 06:25 PM

Was This Post Helpful? 1
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4425
  • View blog
  • Posts: 12,293
  • Joined: 18-April 07

Re: Handle drop down menu selections

Posted 20 July 2014 - 06:23 PM

Well you can add a javascript handler which will call some javascript and from there you can get the selected value... example at http://jsfiddle.net/teX8W/

Enjoy! :)
Was This Post Helpful? 0
  • +
  • -

#4 AnthonyGuevara  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 20-July 14

Re: Handle drop down menu selections

Posted 20 July 2014 - 07:45 PM

View Postandrewsw, on 20 July 2014 - 06:20 PM, said:

You can use the change event of the select element.

However, to get you started, you can use the onchange attribute to produce an alert:
<form method="get"> 
 <select class="helpSelector" onchange="testIt(this.value);">
  <option id="Null" value="0">Select Topic</option>
  <option id="one" value="1">one</option>
  <option id="two" value="2">two</option>
  <option id="three" value="3">three</option>
 </select>
</form>

<script>
function testIt(val) {
    alert(val);
}
</script>

...


Thank you for your prompt reply. Your use of the onchange function within the select field did it for me.

 <select class="helpSelector" onchange="testIt(this.value);">



I can make it do other things with this approach. Like write my own functions. The other ways both of you provided will not work for some reason though. I am using external css and js files with my html5. I will look into addeventlistener later on but until I get the hang of it, why fix it if it isn't broke right?!

Thank you again.

This post has been edited by andrewsw: 21 July 2014 - 03:06 AM
Reason for edit:: reduced quote

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1