Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2013, 17:46
Новичок на форуме
Отправить личное сообщение для Darwin Посмотреть профиль Найти все сообщения от Darwin
 
Регистрация: 06.09.2013
Сообщений: 3

Картинка по списку
Есть выпадающий список, оформлен так:
<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>

Нужно сделать так, чтобы при выборе определенного опшена, сбоку появлялась картинка. К каждому опшену картинка своя.

Помогите пож, пробовал сам не выходит. Выводить сбоку еще допустим тоже самое что и в опшене получается, а как картинку прицепить не знаю(
Очень нужна помощь знающих людей)
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2013, 23:34
Новичок на форуме
Отправить личное сообщение для Darwin Посмотреть профиль Найти все сообщения от Darwin
 
Регистрация: 06.09.2013
Сообщений: 3

Помогите, пожалуйста, ну очень нужна помощь)
Ребят, ну помогите неопытному)
Вот скрипт, который выводит значение 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 а тут вот нужно, а как сделать.
Подскажите, пожалуйста.
Нужно, чтобы при выборе опшена - выводилась картинка, для каждого опшена - своя.
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2013, 01:44
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 05.06.2009
Сообщений: 1,703

При чём тут Angulas.js?
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2013, 02:10
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Tim
При чём тут Angulas.js?
ну надо же было куда-то запостить
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2013, 15:17
Новичок на форуме
Отправить личное сообщение для Darwin Посмотреть профиль Найти все сообщения от Darwin
 
Регистрация: 06.09.2013
Сообщений: 3

Ребят, нужна реальная помощь)
Нужен такой скрипт, а ради одной вещи весь js учить нет времени)
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2013, 11:21
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сорри, коллеги
<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>
Ответить с цитированием
  #7 (permalink)  
Старый 07.10.2013, 00:01
Новичок на форуме
Отправить личное сообщение для FerrisBuller Посмотреть профиль Найти все сообщения от FerrisBuller
 
Регистрация: 06.10.2013
Сообщений: 5

Уважаемый ВЕТЕРАН, а как сделать, если у меня зависимые 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>
Ответить с цитированием
  #8 (permalink)  
Старый 07.10.2013, 08:41
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Проще всего, имхо, назвать фотографии:
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; }

Последний раз редактировалось BETEPAH, 07.10.2013 в 09:35.
Ответить с цитированием
  #9 (permalink)  
Старый 07.10.2013, 14:16
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Блять, сначало написал код, потом заметил что чувак не юзает ангуляр.

<!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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 07.10.2013 в 14:47.
Ответить с цитированием
  #10 (permalink)  
Старый 08.10.2013, 17:14
Новичок на форуме
Отправить личное сообщение для FerrisBuller Посмотреть профиль Найти все сообщения от FerrisBuller
 
Регистрация: 06.10.2013
Сообщений: 5

Я тут попытался , сделать три зависимых селекта , почему-то не вышло, подскажите ошибку

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ПОМОГИТЕ разобраться со скриптом (картинка праздничного дня) Zhuk13@ya.ru Общие вопросы Javascript 7 08.12.2013 19:51
МИГАЮЩАЯ КАРТИНКА johnsag Элементы интерфейса 1 30.05.2012 11:39
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 13.01.2012 01:53
Смена картинок по списку. TrueOman Общие вопросы Javascript 8 28.11.2011 01:11
Opera 11.00 не подгружается картинка greatilya Opera, Safari и др. 1 27.12.2010 20:27