Angular2+中如何将多个iframe作为select元素的选项值

嘿，我一眼就看出问题所在了——你写的HTML里因为双引号嵌套冲突，把浏览器的DOM解析搞乱了！

你看，<option>的value属性用双引号包裹，而你在value里写的iframe代码里，src和width属性也用了双引号。浏览器读到value="<iframe src="的时候，会把第二个"当成value属性的结束标记，后面的内容就变成了无效的HTML，最后自然就报错说找不到匹配的</select>标签了。

给你两种简单可靠的解决办法：

方法1：用单引号包裹option的value值 #

HTML属性支持单引号或双引号作为包裹符，我们把value的包裹符换成单引号，里面的iframe代码继续用双引号，完美避免冲突：

<select name="numberOfChildren" class="selectBox">
  <option value='<iframe src="http://10.0.0.4:5601/app/kibana#/dashboard?embed=true&_g" width="1200"></iframe>'>Graph one</option>
  <option value='<iframe src="http://10.0.0.4:5601/app/kibana#/dashboard/79ffd6e0-faa0-11e6-947f-177f697178b8?embed=true&_g" width="1200"></iframe>'>graph two</option>
</select>

顺带提一句：你的原代码里没写</iframe>闭合标签，最好补上，保证HTML结构的完整性哦。

方法2：转义value里的双引号 #

把iframe代码中的双引号替换成HTML转义字符"，这样浏览器就不会把它们当成value属性的结束标记了：

<select name="numberOfChildren" class="selectBox">
  <option value="<iframe src=&quot;http://10.0.0.4:5601/app/kibana#/dashboard?embed=true&_g&quot; width=&quot;1200&quot;></iframe>">Graph one</option>
  <option value="<iframe src=&quot;http://10.0.0.4:5601/app/kibana#/dashboard/79ffd6e0-faa0-11e6-947f-177f697178b8?embed=true&_g&quot; width=&quot;1200&quot;></iframe>">graph two</option>
</select>

后续使用小提示 #

当你用JavaScript获取选中选项的value时（比如document.querySelector('.selectBox').value），拿到的内容会自动还原成正常的iframe代码，直接插入到页面中就能正常渲染啦。

内容的提问来源于stack exchange，提问作者user9630712