Показать массив изображений на основе выбора

Я пытаюсь сделать следующее ....Показать массив изображений на основе выбора

Создание выпадающего меню, которое является список последних имен
При выборе фамилии, показать все изображения с этой фамилией

Попытка ...

<script> 
 
    function displayAllImages() { 
 
     var smith = ["text instead of Smith pictures","text instead of Smith pictures2"]; 
 
     var jones = ["text instead of Jones pictures"]; 
 

 
     for (i=0;i<2;i++) { 
 
      document.write("<li><p>" + smith[i] + "<p/></li>"); 
 
     } 
 
    }; 
 
</script> 
 
<select> 
 
    <option value="smith">Smith</option> 
 
    <option value="jones">Jones</option> 
 
</select> 
 
<div> 
 
    <ul> 
 
     <script>displayAllImages();</script> 
 
    </ul> 
 
</div>

Что мне нужно для помощи в ретрансляции выпадающего списка в функцию javascript, чтобы я мог переключаться между массивами.

Спасибо!

источник

2016-02-01 nickruggiero

Ожидаете ли вы показывать все изображения, которые * соответствуют * выбранному значению или * содержат * выбранное значение? – sbeliv01

Pro-tip: не используйте 'document.write'. [Это разрушит вашу жизнь.] (Http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) –

Это простой пример, но у меня будут массивы путей изображения, и когда выпадающее меню выбрано, это имя соответствующего массива отобразит все элементы – nickruggiero

Использование на change событий для внесения изменений в вас, выберите и добавьте li s к объекту ul, используя связанный массив с выбранным значением.

Примечание: Использование window[string] в примере ниже, чтобы получить имя переменной из string (выбранного значения параметра).

var smith = ["text instead of Smith pictures","text instead of Smith pictures2"]; 
 
var jones = ["text instead of Jones pictures"]; 
 

 
$('select').on('change', function(){ 
 
    $('ul').empty(); //reset ul 
 
    
 
    var selected_array = window[$(this).val()]; 
 

 
    for (i=0;i<selected_array.length;i++) { 
 
     $('ul').append("<li><p>" + selected_array[i] + "<p/></li>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="smith">Smith</option> 
 
    <option value="jones">Jones</option> 
 
</select> 
 
<div> 
 
    <ul></ul> 
 
</div>

источник

2016-02-01 20:48:23

Где находятся изображения в приведенном выше коде? –

@ ZakariaAcharki Я не могу заставить это работать локально или на JSFiddle, я что-то упускаю? https://jsfiddle.net/exdu0572/ – nickruggiero

JsFiddle не поддерживает 'window []', поэтому он не будет работать (вам также не нужно включать библиотеку jquery). –

Другой подход все в JavaScript может быть:

function displayAllImages(ele) { 
 
    var smith = ["text instead of Smith pictures","text instead of Smith pictures2"]; 
 
    var jones = ["text instead of Jones pictures"]; 
 

 
    var obj = jones; 
 
    var target = document.getElementsByClassName('target')[0]; 
 
    target.innerHTML = ''; 
 
    if (ele.selectedOptions[0].value == 'smith') { 
 
    obj = smith; 
 
    } 
 
    obj.forEach(function(currValue, index, arr) { 
 
    target.innerHTML += "<li><p>" + currValue + "</p></li>"; 
 
    }); 
 
}; 
 
window.onload = function(e) { 
 
    displayAllImages(document.getElementById('selectBox')); 
 
}

<select id="selectBox" onchange="displayAllImages(this);"> 
 
    <option value="smith">Smith</option> 
 
    <option value="jones">Jones</option> 
 
</select> 
 
<div> 
 
    <ul class='target'> 
 
    </ul> 
 
</div>

источник

2016-02-01 21:03:47 gaetanoM

var arrAllImages = []; 
 
arrAllImages["smith"] = 
 
     [ 
 
      "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg", 
 
      "http://farm7.static.flickr.com/6050/6287299751_395316b6cd_z.jpg", 
 
      "https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Sample-image.svg/703px-Sample-image.svg.png" 
 
     ]; 
 
arrAllImages["jones"] = 
 
     [ 
 
      "http://yesyoucanbuythat.com/store/resources/image/18/7a/f.png", 
 
      "http://www.claridgeupholstery.com/images/samples/Beige.jpg", 
 
      "http://www.quality-wars.com/wp-content/uploads/2009/10/gold_standard_main.jpg" 
 
     ]; 
 
function displayUserImages() { 
 
    $("li").remove(); 
 
    var strUserName = $("select").val(); 
 
    $.each(arrAllImages[strUserName], function() { 
 
     $("<li><img src='" + this + "'/></li>").appendTo("ul"); 
 
    }); 
 
} 
 
$(document).ready(function() { 
 
    displayUserImages(); 
 

 
    $("select").change(function() { 
 
     displayUserImages(); 
 
    }); 
 
})

li 
 
{ 
 
    list-style: none ; 
 
    display: inline 
 
} 
 
li img{ 
 
    height: 150px; 
 
    width: 150px; 
 
    margin-right: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <select> 
 
     <option value="smith">Smith</option> 
 
     <option value="jones">Jones</option> 
 
    </select> 
 
    <div> 
 
     <ul></ul> 
 
    </div> 
 
</body>

источник

2016-02-01 21:18:37

Показать массив изображений на основе выбора

ответ

Смежные вопросы