Изменение изображения с помощью нескольких select и javascript

Question

Изменение изображения с помощью нескольких select и javascript

Мне нужно изменить изображение на моем сайте, используя 2 select для цвета и размера.

например Если я выбираю option «Красный» под цветом select , а затем выбираю вариант «Small» под размерным select , изображение должно быть «small_red.png». Аналогично, если я выбираю красный и большой, тогда изображение должно быть «red_large.png»,

До сих пор я знаю только, как это сделать для 1 select , но не для нескольких select .

Вот мой html:

Вот мой javascript:

<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var change = document.getElementById("colour");
    image.src = change.value;   
};
</script>

0

добавлено 28 Декабрь 2012 в 12:58 автор Elijah Yang

Просмотры: 5

источник

ro nl ja fr pt de hi bn ar kk uz be tr uk

в чем проблема?

добавлено 28 Декабрь 2012 в 01:02, автор Muhammad Talha Akbar, источник

@AspiringAqib Пока я знаю, как это сделать для 1 select, но не для нескольких select. .

добавлено 28 Декабрь 2012 в 01:05, автор Yoshi, источник

@AspiringAqib Пока я знаю, как это сделать для 1 select, но не для нескольких select. .

добавлено 28 Декабрь 2012 в 01:05, автор Yoshi, источник

6 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Мини-курс по Angular и NgRx

16 видео-уроков

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

var
  img = document.getElementById('imageToSwap'),
  colour = document.getElementById('colour'),
  size = document.getElementById('size'),
  change;

change = function (evt) {
  img.src = ['img/', size.value, '_', colour.value, '.png'].join('');
};

colour.addEventListener('change', change, false);
size.addEventListener('change', change, false);

с:

demo: http://jsbin.com/iwezad/2/

хотя, используя jQuery , это может быть очень мало, и вы избавитесь от некоторых особенностей браузера относительно addEventListener .

jQuery version:

$('#colour, #size').on('change', function() {
  $('#imageToSwap').prop('src', 
    ['img/', $('#size').val(), '_', $('#colour').val(), '.jpg'].join('')    
  );
});

1

добавлено 28 Декабрь 2012 в 01:04 автор Yoshi

источник

Зачем менять рабочий код?

добавлено 28 Декабрь 2012 в 01:07, автор ATOzTOA, источник

Это не сработает, вы используете «цвет» и «цвет».

добавлено 28 Декабрь 2012 в 01:09, автор ATOzTOA, источник

привет и спасибо за ссылку :)

добавлено 28 Декабрь 2012 в 01:12, автор ATOzTOA, источник

@ATOzTOA ненавязчивый JavaScript

добавлено 28 Декабрь 2012 в 01:09, автор Yoshi, источник

@ATOzTOA просто опечатка, спасибо за подсказку.

добавлено 28 Декабрь 2012 в 01:10, автор Yoshi, источник

Спасибо Йоши. Я буду читать на ненавязчивых js.

добавлено 28 Декабрь 2012 в 01:17, автор Elijah Yang, источник

Инструменты успешного делегирования

Автор: Евгений Попов

Супер After Effects 2

От команды Video-Smile

автор ATOzTOA · Answer 1 · 2012-12-28T01:04Z

Вы всегда можете конкатенировать значения из выбранных.

И в сценарии:

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color;
    };
</script>

автор ATOzTOA · Answer 2 · 2012-12-28T01:04Z

Вы всегда можете конкатенировать значения из выбранных.

И в сценарии:

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color;
    };
</script>

автор ATOzTOA · Answer 3 · 2012-12-28T01:04Z

Вы всегда можете конкатенировать значения из выбранных.

И в сценарии:

<script type="text/javascript">
    function swapImage(){
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;

        image.src = "img/" + size + "_" + color;
    };
</script>

автор Prashant16 · Answer 4 · 2012-12-28T01:18Z

Код Javascript:

<script type="text/javascript" language="javascript">
    function swapImage() {
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;
        var imagename = size + '_' + color + '.png';

        image.src = "img/" + imagename;
    }
</script>

автор Prashant16 · Answer 5 · 2012-12-28T01:18Z

Код Javascript:

<script type="text/javascript" language="javascript">
    function swapImage() {
        var image = document.getElementById("imageToSwap");
        var color = document.getElementById("colour").value;
        var size = document.getElementById("size").value;
        var imagename = size + '_' + color + '.png';

        image.src = "img/" + imagename;
    }
</script>