how to show popup if select "option" in "select" dropdown using javascript?

1. If I select Option1 it has to show popup

2. If I select Option2 it has to show message bel开发者_Python百科ow select box in page

3. If I select Option3 it has to show iframe in the page

How to achieve the above?

    <script>
    $(document).ready(function(){
    $(':input#mysel').live('change',function(){
    var sel_opt = $(this).val();
    alert(sel_opt);
    if(sel_opt==1)
    {
      your code;
    }
     else if(sel_opt==2)
     {
       your code;
     }
      else if(sel_opt==3)
      {
       your code;
      }

    });

 });
    </script>
    <select id="mysel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>`

I assume you mean this:

HTML:

<select id="selection">
    <option value="1">Option 1</option>
    <option value="2">Option 1</option>
    <option value="3">Option 1</option>
</select>

Javascript

$(function() {
    $("#selection").change(function() {
        var val = $(this).val();

        if (val == 1) {
            // ...
        }
    });
});

I wrote on jsfiddle for you. http://jsfiddle.net/BgGTH/1/

use jQuery's .change()

example:

html:

<select name="sel1" id="sel1">
    <option value="1">popup</option>
    <option value="2">message</option>
    <option value="3">iframe</option>
</select>

javascript:

jQuery('#sel1').change(function() {
    if(jQuery(this).val() == "1") {
        //popup code
    }
});

Of course this example only shows the first case, and you could use a switch for the three (or more) options.

I'm assuming by "if select “option” in “select” dropdown using javascript" you mean "when the user selects a particular option I want to use JavaScript to make something else happen".

This should get you started:

$("#IDofYourSelect").change(function() {
   switch ($(this).val()) {
     case "Option1":
        alert("I don't know what you mean by 'popup', but do that here.");
        break;
     case "Option2":
        // show message below select
        break;
     case "Option3":
        // do your iframe thing
        break;
   }
});

If you want something more specific you should make your question (a lot) clearer.

Just handle the onchange of the drop down:

$("#DropDown1").bind("change", function() {
    var value = this.value;
    switch (value) {
        case "Value1":
            window.open("MyPage.html", "myPage");
            break;
        case "Value2":
            $("#MyMessage").show();
            break;
        case "Value3":
            $("#MyFrame").show();
            break;
    }
});

This should point you in the correct direction.