Multi tool use

Jquery, how to dynamically load group of iframe?

I'm trying to dynamically load multiple iframe with a single dropdown, the iframe are grouped, meaning if I choose a item in the dropdown it should show the group of iframe, however I cant get it to work, this is how I coded it:

HTML
<select id="color">
<option label="red" id="red" value="http://red></option>
<option class="hide" id="red1" value="http://red1></option>

<option label="blue" id="blue" value="http://blue></option>
<option class="hide" id="blue1" value="http://blue1></option>

</select>

<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

JQUERY

$(document).ready(function(){
$("color").change(function(){

$("#iframeId").attr("src",$("this").attr("color:selected")val());
$("#iframeId1").attr("src",$("this").attr("color:selected")val());

});
});


any idea, what went wrong?

3 Answers
3

$(document).ready(function(){

$(".color").change(function(){
var check_color = $(this).children(":selected").attr("id");
check_select(check_color);
});
var check_select = function(check_color){
//console.log(check_color);
var values_options = ;
values_options.push(check_color);
$(".color>option").each(function(index,element){
var id_check = $("#"+check_color+index).attr('id');
if(typeof id_check!="undefined"){
values_options.push(id_check)
}

});
// console.log(values_options);
var idframe =
$("iframe").each(function(value){
idframe.push($(this).attr('id'));
});

//console.log(idframe);
//for change iframe

for(var i=0;i<idframe.length;i++){
$("#"+idframe[i]).attr('src',$(".color>option#"+values_options[i]).val());
// console.log($(".color>option#"+values_options[i]).val());

}
}
var color = $(".color").children(":selected").attr("id");
check_select(color);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select class="color">
<option label="red" id="red" data-id="red" value="https://router.vuejs.org/api/#component-injected-properties"> </option>
<option class="hide" id="red1" value="https://router.vuejs.org/guide/#html"></option>

<option label="blue" id="blue" value="https://api.jquery.com/each/"></option>
<option class="hide" id="blue1" value="https://ping.eu/ping/"></option>
</select>

<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

$(document).ready(function(){
$("#color").change(function(){
$("#iframeId").attr("src",$('#color option:selected').val());
$("#iframeId1").attr("src",$('#color option:selected').val());
});
});

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<select id="color">
<option label="red" id="red" value="https://www.youtube.com/embed/PCwL3-hkKrg"> red</option>

<option label="blue" id="blue" value="https://www.youtube.com/embed/EngW7tLk6R8"> blue</option>
</select>
<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>



you have to change jquery code to following

<script>
$(document).ready(function(){
$("#color").change(function(){
$("#iframeId").attr("src",$('#color option:selected').val());
$("#iframeId1").attr("src",$('#color option:selected').val());
});
});

</script>


Tidy up the script part from the @skipperhoa's answer.

$(document).ready(function() {
$("#color").change(function() {
$('#iframeId').attr('src', $(this).find('option:selected').val());
$('#iframeId1').attr('src', $(this).find('option:selected').next().val());
});
$("#color").change();
});

function addIframe() {
var src = 'https://ping.eu/ping/';
$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertAfter($('iframe:last').parent());
}
function addIframeBefore(id) {
var src = 'https://ping.eu/ping/';
$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertBefore($(id).parent());
}
function addIframeafter(id) {
var src = 'https://ping.eu/ping/';
$('<div><iframe id="iframeId' + $('iframe').length + '" src="' + src + '"></iframe></div>').insertAfter($(id).parent());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="button" value="Add New iframe after last iframe" onclick="addIframe()">
<input type="button" value="Add New iframe before iframe1" onclick="addIframeBefore('#iframeId1')">
<input type="button" value="Add New iframe after iframe1" onclick="addIframeafter('#iframeId1')">
<select id="color">
<option label="red" id="red" data-id="red" value="https://router.vuejs.org/api/#component-injected-properties"></option>
<option class="hide" id="red1" value="https://router.vuejs.org/guide/#html"></option>
<option label="blue" id="blue" value="https://api.jquery.com/each/"></option>
<option class="hide" id="blue1" value="https://ping.eu/ping/"></option>
</select>

<div><iframe id="iframeId" src=""></iframe></div>
<div><iframe id="iframeId1" src=""></iframe></div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.