Окно выбора изображения вместо выбора текста?

Я создаю тему для WordPress, и мне нужно иметь selectbox, где я могу нажимать и отображать изображения для выбора.

В настоящее время для этой функции у меня есть выпадающий список с текстом.

<select id='selectbox'>
    <option >Airplane</option>
    <option >Bowling</option>
    <option >Alarm</option>
</select>

Но мне нужно иметь какой-то список выбора с изображениями и без текста. Можно ли сделать что-то подобное? Я предполагаю, что это будет включать JQuery в работе. Но я не могу найти ответы в сети.

Хорошо, я потратил целый день, чтобы заставить это работать, но я думаю, что я слишком глуп. На каждом возможном примере и решении у меня есть некоторые проблемы с его работой.

Вот весь код метабокса, который я использую: http://pastebin.com/1kvYz8Mg это для темы WordPress, а все остальное работает так, как мне нужно, единственное, чего я не могу получить, так это если я смогу заменить блок выбора на какие-то изображения список, чтобы выбрать правильное изображение для поля.

Источник

7 ответов

Попробуй это:

JQuery:

$("#selectbox").change(function(){
    var selectedIndex = $("#selectbox")[0].selectedIndex;

    $('ul#images li').each(function(index) {
        if ( index === selectedIndex ) { $(this).show(); }
        else { $(this).hide(); }
    });
});

HTML:

<select id="selectbox">
    <option >Airplane</option>
    <option >Bowling</option>
    <option >Alarm</option>
</select>

<ul id="images">
    <li><img src="sample1.jpg" /></li>
    <li><img src="sample2.jpg" /></li>
    <li><img src="sample3.jpg" /></li>
</ul>
Источник

В этом примере используется PHP, и из базы данных он получает значение от 0 до 3, устанавливает непрозрачность изображения и выбирает значение поля следующим образом:

Javascript

<script type="text/javascript">
function ChangeLights(selector){
        if (selector == 0){
            document.getElementById("Light0").style.opacity = "1";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 0;
        }
        if (selector == 1){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "1";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 1;
        }
        if (selector == 2){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "1";
            document.getElementById("Light3").style.opacity = "0.2";
            document.getElementById(\'Run_Status\').selectedIndex = 2;
        }
        if (selector == 3){
            document.getElementById("Light0").style.opacity = "0.2";
            document.getElementById("Light1").style.opacity = "0.2";
            document.getElementById("Light2").style.opacity = "0.2";
            document.getElementById("Light3").style.opacity = "1";
            document.getElementById(\'Run_Status\').selectedIndex = 3;
        }
}
</script>

PHP

$Run_Number['Run_Status'] = 0;//test value
echo '    
<select name="Run_Status" id="Run_Status">
    <option value="0" '.($Run_Number['Run_Status'] == "0" ? "selected":"").'>Not Ready</option>
    <option value="1" '.($Run_Number['Run_Status'] == "1" ? "selected":"").'>Ready</option>
    <option value="2" '.($Run_Number['Run_Status'] == "2" ? "selected":"").'>In Transit</option>
    <option value="3" '.($Run_Number['Run_Status'] == "3" ? "selected":"").'>Delivered</option>
    </select>

    <img id="Light0" class="light" src="images/light-red.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 0 ? '1':'.2').';" title="Not Ready" onclick="ChangeLights(\'0\')">
    <img id="Light1" class="light" src="images/light-rey.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 1 ? '1':'.2').';" title="Ready" onclick="ChangeLights(\'1\')">
    <img id="Light2" class="light" src="images/light-yel.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 2 ? '1':'.2').';" title="In Transit" onclick="ChangeLights(\'2\')">
    <img id="Light3" class="light" src="images/light-gre.jpg" height="40" style="image-orientation: 90deg; opacity: '.($Run_Number['Run_Status'] == 3 ? '1':'.2').';" title="Delivered" onclick="ChangeLights(\'3\')">
';

Там будут лучшие способы сделать это уверен, но это работает

Источник

Я, вероятно, использовал бы список кнопок RADIO и имел бы изображения внутри тегов LABEL, прикрепленных к каждому входу RADIO.

Вот простой jsfiddle для демонстрации. http://jsfiddle.net/TnFma/

function createImageSelectList(id, name, arrOptions) {
    var $elm = $("#" + id);
    for(var x = 0; x<arrOptions.length; x++) {
        var opt = arrOptions[x];
        var subId = name + "_" + opt.value;
        var $rad = $("<input />");
        $rad.attr("type", "radio");
        $rad.attr("value", opt.value);
        $rad.attr("name", name);
        $rad.attr("id", subId);
        var $lbl = $("<label />");
        $lbl.attr("for", subId);
        $lbl.append($("<img />")
            .attr("src", $("#" + opt.image).attr("src")));
        $elm.append($lbl);
        $elm.append($rad);
    }
}
Источник

Я полагаю, вы ищете что-то вроде этого: Javascript image dropdown 2.0

Источник 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://thdoan.github.io/bootstrap-select/css/bootstrap-select.css">
<style>
body { margin:2em; }
pre { margin:1em 0; }
select.selectpicker { display:none; /* Prevent FOUC */}
</style>

<form>
<h2>Select with Thumbnails</h2>
  <select title="Select your surfboard" class="selectpicker">
    <option>Select...</option>
  <option data-thumbnail="https://avatars2.githubusercontent.com/u/7187348?v=3&s=40">Chrome</option>
  <option data-thumbnail="images/icon-firefox.png">Firefox</option>
  <option data-thumbnail="<?php echo base_url(); ?>assets/favicon.ico">IE</option>
  <option data-thumbnail="images/icon-opera.png">Opera</option>
  <option data-thumbnail="images/icon-safari.png">Safari</option>
  <option data-thumbnail="images/icon-chrome.png">Chrome</option>
    <option data-thumbnail="images/icon-firefox.png">Firefox</option>
    <option data-thumbnail="images/icon-ie.png">IE</option>
    <option data-thumbnail="images/icon-opera.png">Opera</option>
    <option data-thumbnail="images/icon-safari.png">Safari</option>
  </select>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://thdoan.github.io/bootstrap-select/js/bootstrap-select.js"></script>
Источник

Чтобы сделать это, вам нужно, чтобы ваши соответствующие изображения были в своих отдельных "div" блоках, где каждый div установлен для отображения: нет.

Например

 <div id="0" style="display:block"><img src="your Airplane image path" /></div>
 <div id="1" style="display:none"><img src="your Bowling image path" /></div>
 <div id="2" style="display:none"><img src="your Alarm image path" /></div>

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

 <script>
  function changeSelectBox() {
      $("#0,#1,#2").hide();

      $('#' + document.getElementById('selectbox').selectedIndex).show();
 }
 </script>

 <select id='selectbox' onchange="return changeSelectBox();">
     <option selected>Airplane</option>
     <option >Bowling</option>
     <option >Alarm</option>
 </select>

Затем добавьте JQuery к вашему, и все готово. Теперь вы можете изменить выпадающий список, и отображаемое изображение также изменится.

ПРИМЕЧАНИЕ: написал это, не пытаясь это сделать, может где-то ошибка с запятой, кто знает.

Источник

Вот попытка с почти чистым CSS.

Он использует радио для хранения выбранного значения ($_POST['thing']), которые обернуты в соответствующие ярлыки. Контролировать видимость изображений по кликам немного сложно. Используя ссылки и :target Вы можете сделать так, чтобы все изображения отображались при нажатии кнопки "Выбрать", но вам все еще нужен способ скрыть другие изображения, когда сделан выбор. Вот почему я должен был добавить onclick атрибут на ярлыках, чтобы удалить #select хэш. Если кто-нибудь знает способ скрыть это с помощью CSS, я хотел бы услышать это:)

Используя jQuery, это довольно легко реализовать. Предполагая, что у вас есть DIV с изображениями внутри и скрытое поле ввода:

$('.select').each(function(){
  var input = $('input', this),
      images = $('img', this),
      selecting = false;

  images.hide().click(function(){             

    // if the select box is open and a image was cliked
    if(selecting){
      input.val($(this).index() + 1);
      images.not(this).hide();

    // if select box is closed and the active image was clicked
    }else{     
      images.show();             
    }

    selecting = !selecting;

  }).eq(input.val() - 1).show();    

});

Поле ввода (thing) будет хранить индекс изображения...

( скрипка)

Источник
Другие вопросы по тегам