标签<p> <select> 属性中标签上的动态文本

Question

我在下面的代码上从网站上得到了很多帮助，我希望问另一个(也许是这个:)之后的另一个(不要太多

无论如何，我正在考虑从<select>标签中的属性中添加<p>标签的文本，但我似乎可以弄清楚。 下面是代码：

HTML
<select id="AD">
<option label="Fruits" id="Fruits1" value="Good for you">   </option>
<option class="hide" id="Apples" value="http://www..."></option>
<option class="hide" id="Orages" value="http://www..."></option>
<option label="Chocolate" id="Chocolate1" value="Very Sweet"></option>
<option class="hide" id="Hersheys" value="http://www...">
<option class="hide" id="Kitkat" value="http://www..."></option>
<option label="Planets" id="Planet1" value="One day we will live there"></option>
<option class="hide" id="Mars" value="http://www..."></option>
<option class="hide" id="Jupiter" value="http://www..."></option>
<option label="Softdrinks" id="Softdrinks" value="Lots of sugar"></option>
<option class="hide" id="Coke" value="http://www...">
<option class="hide" id="Pepsi" value="http://www..."></option>
</select>
<div>
<p id="iframeId"></p>
</div>
<div>
<iframe id="iframeId1" scr=""></iframe>
</div> 
<div>
<iframe id="iframeId2" scr=""></iframe>
</div>
JQUERY Code
$(document).ready(function() {                      
$("#AD").change(function() {
$('#iframeId').attr('src', $(this).find('option:selected').val());
$('#iframeId1').attr('src', $(this).find('option:selected').next().val()); 
$('#iframeId2').attr('src', 
$(this).find('option:selected').next().next().val());   
});
$("#AD").change(); 
});

iframe工作得很好，只是无法显示<p>标签。我错过了什么？

Answer 1

您正在p标签上设置src属性，该属性不正确，并且不会执行任何操作。
您可以使用text()设置p标记的文本

$('#iframeId').text($(this).find('option:selected').val());

Answer 2

用一个工作示例扩展 Musa 的答案，设置text()而不是不正确的src属性肯定可以完成这项工作。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AD">
<option label="Fruits" id="Fruits1" value="Good for you"> </option>
<option class="hide" id="Apples" value="http://www..."></option>
<option class="hide" id="Orages" value="http://www..."></option>
<option label="Chocolate" id="Chocolate1" value="Very Sweet"></option>
<option class="hide" id="Hersheys" value="http://www..."></option>
<option class="hide" id="Kitkat" value="http://www..."></option>
<option label="Planets" id="Planet1" value="One day we will live there"></option>
<option class="hide" id="Mars" value="http://www..."></option>
<option class="hide" id="Jupiter" value="http://www..."></option>
<option label="Softdrinks" id="Softdrinks" value="Lots of sugar"></option>
<option class="hide" id="Coke" value="http://www..."></option>
<option class="hide" id="Pepsi" value="http://www..."></option>
</select>
<div>
<p id="iframeId"></p>
</div>
<div><iframe id="iframeId1" scr=""></iframe></div>
<div><iframe id="iframeId2" scr=""></iframe></div>