Javascript代码，有个select选项框，还有个img图片，如何选择不同的select内容
1.ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。ng-include 属性的值可以是一个表达式，返回一个文件名。默认情况下，包含的文件需要包含在同一个域名下。
1、标签方式：<ng-include src=“”>这里会被覆盖</ng-include>
2、属性方式：<div ng-include=“”>这里会被覆盖</div>
3、类方式：<div class=“ng-include:’ ’ ”>这里会被覆盖</div>
[html] view plain copy
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-controller="myController">
<!-- template存放的是 templates中的每一个对象,相当于是item -->
<select ng-model="template" ng-options="item.name for item in templates">
<option value="">please choice</option>
</select>
当前加载的模板是{{template.name}} :{{template.url}}
<div ng-include="template.url">
</div>
<p>我是广告给我打电话 办证</p>
</body>
<script src="angular.min.js"></script>
<script>
angular.module('myApp',[])
.controller('myController',['$scope',function($scope){
$scope.templates = [
{name:'template1',url:'template1.html'},
{name:'template2',url:'template2.html'}
];
// $scope.template = $scope.templates[0];
$scope.myStyle = {
'background-color':'red'
};
}])
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
//需要将option中的value替换成图片的路径
onload = function () {
var $ = document.querySelector.bind(document);
var img = $('#source');
$('#select').onchange = function (e) {
var selectOption = this.options[this.selectedIndex];
img.src = selectOption.value;
img.alt = selectOption.text;
}
}
</script>
</head>
<body>
<div id="container">
<select id="select">
<!-- //需要将option中的value替换成图片的路径 -->
<option value="img_path_1.png" selected>img_path_1</option>
<option value="img_path_2.png">img_path_2</option>
<option value="img_path_3.png">img_path_3</option>
</select>
<img src="img_path_1.png" alt="img_path_1" id='source' />
</div>
</body>
</html>
白度搜索 青春华航，我的博客，多多交流
