Картинка по списку
Есть выпадающий список, оформлен так:
<xsl:template match="field[@type = 'relation']" mode="form-fields"> <tr> <td class="text_info"><xsl:value-of select="@title"/>:</td> </tr> <tr> <td class="text_input"> <select class="{@name}" name="{@input_name} sweets"> <xsl:apply-templates select=".//item" mode="form-select"/> </select> </td> </tr> </xsl:template> <xsl:template match="item" mode="form-select"> <option class="op_vybor" value="{@id}"> <xsl:value-of select="." /> </option> </xsl:template> Это на xslt, работает как и обычного вида: <select> <option>1</option> <option>2</option> <option>3</option> </select> Нужно сделать так, чтобы при выборе определенного опшена, сбоку появлялась картинка. К каждому опшену картинка своя. Помогите пож, пробовал сам не выходит. Выводить сбоку еще допустим тоже самое что и в опшене получается, а как картинку прицепить не знаю( Очень нужна помощь знающих людей) |
Помогите, пожалуйста, ну очень нужна помощь)
Ребят, ну помогите неопытному)
Вот скрипт, который выводит значение value выбираемого пункта из списка.
<script>
$(document).ready(function(){
$('select.avtomobil').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).val();
});
$("li.vivod").text($(this).val());
})
.change();
});
</script>
На сколько понимаю, если убрать все от var str = ""; и вместе с ним 4 строчки ни чего не измениться. Не знаю зачем это сбрасываю. Может просто, чтобы люди поняли, что я полный профан в js а тут вот нужно, а как сделать. Подскажите, пожалуйста. Нужно, чтобы при выборе опшена - выводилась картинка, для каждого опшена - своя.:cray: |
При чём тут Angulas.js?
|
Цитата:
|
Ребят, нужна реальная помощь)
Нужен такой скрипт, а ради одной вещи весь js учить нет времени)
|
Сорри, коллеги ;)
<select id="selImg" onchange="document.getElementById('target').src = this.value">
<option value="http://javascript.ru/forum/image.php?u=2666&dateline=1353162565">Tim</option>
<option value="http://javascript.ru/forum/image.php?u=17434&dateline=1322593884f">nerv_</option>
</select>
<div><img id="target" src="http://javascript.ru/forum/image.php?u=2666&dateline=1353162565" alt="" /></div>
|
Уважаемый ВЕТЕРАН, а как сделать, если у меня зависимые select'ы, а
мне нужно чтобы фото выводилось после выбора каждого изменения. Вот как у меня выглядит на данный момент скрипт: (можно посмотреть результат тут http://testmagaz.tw1.ru) <script language="JavaScript"> <!-- function l_image (a) { document.images [0] .src=a } --> </script> <table cols="2" width="90%" border="0"> <tr><td> <p><select id="List1" onchange="document.images[0].src=this.options[this.selectedIndex].value"> <option value="white">White</option> <option value="black">Black</option> </select></p> <p><select id="List2"></select></p> <p><select id="List3"></select></p></td> <td align="center" valign="center"><img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" ></td> </tr> </table> <script type="text/javascript"> var syncList1 = new syncList syncList1.dataList = { 'white':{ 'white_1':'обычная', 'white_2':'приталинная' }, 'black':{ 'black_1':'обычная ч', 'black_2':'приталинная ч' }, 'white_1':{ 'white_1_1':'обычная с 2 пуговицами', 'white_1_2':'обычная с 3 пуговицами' }, 'white_2':{ 'white_2_1':'приталинная с 2 пуговицами', 'white_2_2':'приталинная с 3 пуговицами' }, 'black_1':{ 'black_1_1':'обычная ч с 2 пуговицами', 'black_1_2':'обычная ч с 3 пуговицами' }, 'black_2':{ 'black_2_1':'приталинная с 2 пуговицами', 'black_2_2':'приталинная с 3 пуговицами' } }; syncList1.sync("List1","List2","List3"); </script> |
Проще всего, имхо, назвать фотографии:
bo2.jpg, bo3.jpg, bp2.jpg, bp3.jpg, wo2.jpg, wo3.jpg, wp2.jpg, wp3.jpg и формировать имя файла для вывода в одной функции: b - черная, w - белая, o - обычная, p - приталенная, 2 - с двумя пуговицами, 3 - с тремя (проставить соответствующие value в селектах).
document.getElementById('List1').onchange = document.getElementById('List2').onchange = document.getElementById('List3').onchange = function () {document.getElementById('photo').src = document.getElementById('List1').value + document.getElementById('List2').value + document.getElementById('List3').value; }
|
Блять, сначало написал код, потом заметил что чувак не юзает ангуляр.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<h2 >Магазинчег</h2>
<div>
<div>
<label>Одежда</label>
<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select>
</div>
<div>
<label>Размер модели</label>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select>
</div>
</div>
<img src="{{img}}"/>
<script>
function Controller($scope) {
var groups = [
{
"Id": "1",
"Name": "Белое платье сшитое эльфами ",
"Items": [
{
"Id": "1",
"Name": "Большое",
"img":"http://javascript.ru/forum/image.php?u=17434&dateline=1322593884f"
}, {
"Id": "2",
"Name": "Маленькое",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "3",
"Name": "Среднее",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "4",
"Name": "XXL Для жиртресток",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}, {
"Id": "2",
"Name": "Куртка из кожи с жопы дракона",
"Items": [
{
"Id": "5",
"Name": "Для детей",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "6",
"Name": "Для карликов",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "7",
"Name": "Для гномов",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}];
$scope.groups = groups; // Все товары
$scope.currentGroup = groups[0]; // Выбранные товар
$scope.currentItems = $scope.currentGroup.Items; // Все размеры
$scope.currentItem = $scope.currentItems[0]; // Выбраный размер
//Следим за изменением товара
$scope.$watch('currentGroup', function () {
$scope.currentItems = $scope.currentGroup.Items;
$scope.currentItem = $scope.currentGroup.Items[0];
});
//Следим за изменением размера
$scope.$watch('currentItem', function () {
$scope.img = $scope.currentItem.img;
})
}
</script>
</div>
</body>
</html>
|
Я тут попытался , сделать три зависимых селекта , почему-то не вышло, подскажите ошибку
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<h2 >Магазинчег</h2>
<table cols="2" width="90%" border="0">
<tr><td><p>
<label>Цвет рубашки</label>
<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
<p><label>Тип рубашки</label>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>
<p><label>Запястье</label>
<select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>
<td><img src="{{img}}"/></td><tr></table>
<script>
function Controller($scope) {
var groups = [
{
"Id": "1",
"Name": "Белое платье сшитое эльфами ",
"Items": [
{
"Id": "1",
"Name": "Большое",
"img":"http://javascript.ru/forum/image.php?u=17434&dateline=1322593884f"
"Zaps": [
{
"Id": "1",
"Name": "2 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "3 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "2",
"Name": "Маленькое",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "3",
"Name": "Среднее",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "4",
"Name": "XXL Для жиртресток",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}, {
"Id": "2",
"Name": "Куртка из кожи с жопы дракона",
"Items": [
{
"Id": "5",
"Name": "Для детей",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "6",
"Name": "Для карликов",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "7",
"Name": "Для гномов",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}];
$scope.groups = groups; // Все товары
$scope.currentGroup = groups[0]; // Выбранные товар
$scope.currentItems = $scope.currentGroup.Items; // Все размеры
$scope.currentItem = $scope.currentItems[0]; // Выбраный размер
$scope.currentZaps = $scope.currentItem.Zaps;
$scope.currentZap = $scope.currentZaps[0];
//Следим за изменением товара
$scope.$watch('currentGroup', function () {
$scope.currentItems = $scope.currentGroup.Items;
$scope.currentItem = $scope.currentGroup.Items[0];
$scope.currentZaps = $scope.currentGroup.Zaps;
$scope.currentZap = $scope.currentGroup.Zaps[0];
});
//Следим за изменением размера
$scope.$watch('currentItem', function () {
$scope.img = $scope.currentItem.img;
}),
$scope.$watch('currentZap', function () {
$scope.img = $scope.currentZap.img;
})
}
</script>
</div>
</body>
</html>
|
Цитата:
<html>
<head>
<title>Документ без названия</title>
<script type="text/javascript" src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/linkedselect.js"></script>
</head>
<body>
<script language="JavaScript">
<!--
function l_image (a)
{
document.images [0] .src=a
}
-->
</script>
<table cols="2" width="90%" border="0">
<tr><td>
<p><select id="List1" onchange="document.getElementById('List1').onchange = document.getElementById('List2').onchange = document.getElementById('List3').onchange = function () {document.getElementById('photo').src = document.getElementById('List1').value + document.getElementById('List2').value + document.getElementById('List3').value; }">
<option value="white" >White</option>
<option value="black">Black</option>
</select></p>
<p><select id="List2"></select></p>
<p><select id="List3"></select></p></td>
<td align="center" valign="center"><img src="http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg" name="tool" ></td>
</tr>
</table>
<script type="text/javascript">
var syncList1 = new syncList
syncList1.dataList = {
'white':{
'white_1':'обычная',
'white_2':'приталинная'
},
'black':{
'black_1':'обычная ч',
'black_2':'приталинная ч'
},
'white_1':{
'white_1_1':'обычная с 2 пуговицами',
'white_1_2':'обычная с 3 пуговицами'
},
'white_2':{
'white_2_1':'приталинная с 2 пуговицами',
'white_2_2':'приталинная с 3 пуговицами'
},
'black_1':{
'black_1_1':'обычная ч с 2 пуговицами',
'black_1_2':'обычная ч с 3 пуговицами'
},
'black_2':{
'black_2_1':'приталинная с 2 пуговицами',
'black_2_2':'приталинная с 3 пуговицами'
}
};
syncList1.sync("List1","List2","List3");
</script>
</body>
</html>
|
Вы забыли запятую в одной строке поставить, и пытались брать zip из Groups в то время как сами запихали его в items.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<h2 >Магазинчег</h2>
<table cols="2" width="90%" border="0">
<tr><td><p>
<label>Цвет рубашки</label>
<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
<p><label>Тип рубашки</label>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>
<p><label>Запястье</label>
<select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>
<td><img src="{{img}}"/></td><tr></table>
<script>
function Controller($scope) {
var groups = [
{
"Id": "1",
"Name": "Белое платье сшитое эльфами ",
"Items": [
{
"Id": "1",
"Name": "Большое",
"Zaps": [
{
"Id": "1",
"Name": "2 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "3 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "2",
"Name": "Маленькое",
"Zaps": [
{
"Id": "1",
"Name": "4 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "Молния",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "3",
"Name": "Среднее",
"Zaps": [
{
"Id": "1",
"Name": "Шнурки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "Липучки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "4",
"Name": "XXL Для жиртресток",
"Zaps": [
{
"Id": "1",
"Name": "Магически срастается",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "снимается по заклятью",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}
]
}, {
"Id": "2",
"Name": "Куртка из кожи с жопы дракона",
"Items": [
{
"Id": "5",
"Name": "Для детей",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "6",
"Name": "Для карликов",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "7",
"Name": "Для гномов",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}];
$scope.groups = groups; // Все товары
$scope.currentGroup = groups[0]; // Выбранные товар
//Следим за изменением товара
$scope.$watch('currentGroup', function () {
$scope.currentItems = $scope.currentGroup.Items;
$scope.currentItem = $scope.currentGroup.Items[0];
});
//Следим за изменением размера
$scope.$watch('currentItem', function () {
$scope.img = $scope.currentItem.img;
$scope.currentZaps = $scope.currentItem.Zaps;
$scope.currentZap = $scope.currentItem.Zaps[0];
}),
$scope.$watch('currentZap', function () {
$scope.img = $scope.currentZap.img;
})
}
</script>
</div>
</body>
</html>
В примере тип запястья зависит от размера рубашки. Если вдруг нужно чтобы запястья зависило только от группы а не от размера тогда делаем так. 1) Размещать zip надо в groups рядом с items, а не внутри items 2) Соответственно устанавливать при изменении группы а не items. Тобиш $watch('currentGroup' 3) Забирать zip из currentGroup а не currentItem. тобиш $scope.currentZaps = $scope.currentGroup.Zaps; |
Спасибо!!!!!!
|
Цитата:
Цитата:
|
Цитата:
|
Уважаемый djDiablo,
а как сделать так, чтобы выбранное вариант положить в корзину? что нужно прикрутить? |
Корзину можно реализовать как форму которую можно отправить на сервер нажатием обыкновенного submit и затем обработать на сервере при помощи обычного php.
В качестве демонстрации, вот немного грязного, не аккуратного и непродуманного кода написанного по принципу лишь бы отвязаться ))) Будет время чуть позже, нарисую чо нибудь покрасивше. А пока вот тебе то что набросал на скорую руку:) Сейчас в примере конечно просто категория отображается, но ты сам виноват ведь название товара как такового у тебя нигде не указано. Попробуй наименование товара сам добавить, и следи чтобы id у тебя были уникальные и не повторялись.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<h2 >Магазинчег</h2>
<table cols="2" width="90%" border="0">
<tr><td><p>
<label>Цвет рубашки</label>
<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
<p><label>Тип рубашки</label>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>
<p><label>Запястье</label>
<select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>
<td><img src="{{img}}"/></td><tr></table>
<button ng-click="add()"> Добавить в корзинку </button>
<h2> Корзинка красной шапочки. </h2>
<form action="zakaz.php" method="post">
<table>
<tr>
<td> Наименование </td>
<td> количество </td>
<td> цена </td>
<td> операции </td>
</tr>
<tr ng-repeat="item in basket">
<td> <input name="id[]" TYPE="hidden" value='{{item.id}}'> {{item.Name}} </td>
<td> <input name="count[]" ng-model='item.count'> </td>
<td> </td>
<td> <button ng-click="remove(item.id)" >Убрать</button> </td>
</tr>
</table>
<input type="submit" value="Оформить заказ"> </input>
</form>
<script>
function Controller($scope) {
// надеюсь перевод это не мусорная корзина ))
$scope.basket = [];
var groups = [
{
"Id": "1",
"Name": "Белое платье сшитое эльфами ",
"Items": [
{
"Id": "1",
"Name": "Большое",
"Zaps": [
{
"Id": "2",
"Name": "3 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "4",
"Name": "4 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "6",
"Name": "Маленькое",
"Zaps": [
{
"Id": "7",
"Name": "4 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "8",
"Name": "Молния",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "9",
"Name": "Среднее",
"Zaps": [
{
"Id": "10",
"Name": "Шнурки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "11",
"Name": "Липучки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "12",
"Name": "XXL Для жиртресток",
"Zaps": [
{
"Id": "13",
"Name": "Магически срастается",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "14",
"Name": "снимается по заклятью",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}
]
}, {
"Id": "2",
"Name": "Куртка из кожи с жопы дракона",
"Items": [
{
"Id": "15",
"Name": "Для детей",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "16",
"Name": "Для карликов",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "17",
"Name": "Для гномов",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}];
$scope.groups = groups; // Все товары
$scope.currentGroup = groups[0]; // Выбранные товар
//Следим за изменением товара
$scope.$watch('currentGroup', function () {
$scope.currentItems = $scope.currentGroup.Items;
$scope.currentItem = $scope.currentGroup.Items[0];
});
//Следим за изменением размера
$scope.$watch('currentItem', function () {
$scope.img = $scope.currentItem.img;
$scope.currentZaps = $scope.currentItem.Zaps;
$scope.currentZap = $scope.currentItem.Zaps[0];
}),
$scope.$watch('currentZap', function () {
$scope.img = $scope.currentZap.img;
$scope.currentZap = $scope.currentZap;
})
//Добавление товара в корзину
$scope.add=function(){
var newItem=true;
for(var i=0,l=$scope.basket.length;i<l;i++){
if($scope.basket[i].id==$scope.currentZap.Id) {
$scope.basket[i].count++;
newItem=false;
break;
}
}
if( newItem ){
$scope.basket.push( {
Name:$scope.currentZap.Name,
count:1,
id:$scope.currentZap.Id
});
}
};
//удаление товара из корзины
$scope.remove=function(id){
for(var i=0,l=$scope.basket.length;i<l;i++){
if($scope.basket[i].id==id) {
$scope.basket.splice(i, 1);;
break;
}
}
}
}
</script>
</div>
</body>
</html>
К слову меня очень забавляет вопрос как и где ты будешь формировать древовидную структуру данных с товарами которая предложена тобой для скрипта:) |
| Часовой пояс GMT +3, время: 08:45. |