trigger event on selected option

Question

Is it possible to trigger an event on selected option without submitting form?

  <h3 id="center" align="center">OUR SITE CAN ONLY PROVIDE YOU INFO ABOUT MANTIONED COUNTRIES</h3>

<SELECT style="padding:10px;margin-left: 550px;margin-top: 20px;">
    <option name="india">India</OPTION>
    <option name="pakistan">Pakistan</OPTION>
    <option name="US">UNITED STATE</OPTION>
    <option name="UK">UNITED KINGDOM</option>
</SELECT>

You can write a php function to do this, but if you dont want a page refresh (eg form submit) you will need to call this function via javascript(ajax). Unless the function needs to access sensitive data it would make more sense to write the whole thing in javascript — Steve, Nov 12 '14 at 11:24

score 1 · Answer 1 · answered Nov 12 '14 at 11:27

Because you requested for a javascript example. Here is an example of a javascript variant.

<select onchange="jsFunction(this)">
  <option value="" disabled selected style="display:none;">Label</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<script>
    function jsFunction(select)
    {
      alert(select.options[select.selectedIndex].value);
    }
</script>

score 1 · Answer 2 · answered Nov 12 '14 at 11:27

1

you cant do that with php but can be done using Javascript/Jquery as @S.Pols said

$(document).ready(function() {
    $('body').on("change","#select",function(){  // select is the id of your select tag
        alert("selected");
    });
});

answered Nov 12 '14 at 11:27

Ronser

1,855
6
20
38

score 1 · Accepted Answer · answered Nov 12 '14 at 11:27

You can't do that with PHP (since it's server side language). Use js/jQuery for that.

$(document).ready(function() {
  $("#dropdown").change(function() {
    alert("Selection: " + $("option:selected", this).val() + ":" + $("option:selected", this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 id="center" align="center">OUR SITE CAN ONLY PROVIDE YOU INFO ABOUT MANTIONED COUNTRIES</h3>

<select id="dropdown" name="countries" style="padding:10px;margin-left: 550px;margin-top: 20px;">
  <option value="india">India</option>
  <option value="pakistan">Pakistan</option>
  <option value="US">UNITED STATE</option>
  <option value="UK">UNITED KINGDOM</option>
</select>

Also, name attribute is for select not for option. Check snippet markup changed.

trigger event on selected option

3 Answers3

Linked