Can I select a dropdown value in an iframe?

by 5 replies
7
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?
#programming #dropdown #iframe #select
  • 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>
    • [ 1 ] Thanks
  • Thanks vie.. i'll have a play with it tomorrow.
    • [1] reply
    • 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.
  • 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>
  • This is great, thanks!
Join the discussion

Next Topics on Trending Feed

  • 7

    Can I select a dropdown value in an iframe?

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