How Do I Get The Selected Value From A Select Box, From Inside An Iframe, And Display It On The Outside?

I have this select box in HTML, and the page it's on is being loaded into another page (both on my website) through an iframe. I want to be able to get the selected value from the

Solution 1:

I'm not sure what your HTML looks like, but

$("twitter").attr("id", url);

should probably be:

$(".twitter").attr("id", url);

---

Update: Try this code... you need to detect if the iframe has loaded as well (demo)

$(function () {
    // define this here because we're changing the IDvar $twitter = $('#twitter');
    // bind to select inside iframe
    $('#iframe').on('load', function () {
        $(this).contents().find('#cds').change(function () {
            var selectVal = $(this).val();
            url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
            $twitter.attr("id", url).text(url);
        }).change(); // trigger change to get initial value
    });
});

Also, since we're changing the ID of twitter, we need to save that jQuery object.