7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Can I select a dropdown value in an iframe?

by webpeon
5 replies
I have a page/form which I need to iframe into my website for branding purposes.

The page/form I want inside the iframe has a dropdown menu which I have no control over.. but need to have that dropdown pre-select a particular menu item when it loads inside my iframe..

How do I do this?
#dropdown #iframe #select
  • Profile picture of the author viescripts
    here what you do:

    Warning: this works only on server side, otherwise you will see security errors and warnings.


    file1

    <html>
    <body>

    <!-- your iframe, see file2 below -->
    <iframe src="frame.html" frameborder="0" width="500" height="300" id="iiframe"></iframe>

    <!-- get latest jquery library from google apis -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <!-- jquery code below find in iframe with ID:iiframe, the element with ID:selcolor and option attribute value="green" and marks it as selected -->
    <script type="text/javascript">
    (function(){
    $('#iiframe').contents().find('#selcolor option[value="green"]').attr('selected', 'selected');
    })();
    </script>
    </body>
    </html>


    file2

    <html>
    <body>
    <select name="selcolor" id="selcolor">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    </select>
    </body>
    </html>
    {{ DiscussionBoard.errors[7213277].message }}
  • Profile picture of the author webpeon
    Thanks vie.. i'll have a play with it tomorrow.
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[7213473].message }}
    • Profile picture of the author viescripts
      Originally Posted by webpeon View Post

      Thanks vie.. i'll have a play with it tomorrow.
      forgot, you need to name the file2: frame.html or change the file name in iframe.
      I can drop a link to a working example if necessary.
      {{ DiscussionBoard.errors[7215598].message }}
  • Profile picture of the author Sitesupplier
    Originally Posted by webpeon View Post

    I have a page/form which I need to iframe into my website for branding purposes.

    The page/form I want inside the iframe has a dropdown menu which I have no control over.. but need to have that dropdown pre-select a particular menu item when it loads inside my iframe..

    How do I do this?
    When you say you have no control over it, does this mean no access to the source? If this is the case, can you not simply e-mail the necessary person to take care of this? You don't need to use JavaScript to have a given item pre-selected, you just do this:

    Code:
    <select id="dropdown_options">
    <option id="one">Option one</option>
    <option id="two" selected>Option two</option>
    <option id="three"> Option three</option>
</select>
    It's also completely unnecessary to need the jQuery library to achieve this. Some basic JS is all you need:

    Code:
    <select id="dropdown_options">
    <option id="one">Option one</option>
    <option id="two">Option two</option>
    <option id="three"> Option three</option>
</select>

<script type="text/javascript">
(function()
{
    document.getElementById("dropdown_options").options["two"].selected = true;
})();
</script>
    http://jsfiddle.net/FZGbC/2/

    Note: just to be clear, you can access the iframe source in JavaScript like so:

    Code:
    <iframe name="test" id="test"></iframe>

<script type="text/javascript">
    console.log(test.document);
</script>
    {{ DiscussionBoard.errors[7226889].message }}
  • Profile picture of the author Mikestankowski
    This is great, thanks!
    Signature

    Discover How To Quit Your Job And Work Online In My Free Video Course!
    http://mikestankowski.com/quityourjob

    {{ DiscussionBoard.errors[7253644].message }}

Trending Topics