图像选择框而不是文本选择？

Question

我正在为 wordpress 创建主题，我需要有一个选择框，我可以在其中单击并显示要选择的图像。

目前对于该功能，我有选择带有文本的下拉列表。

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

但我需要某种带有图像但没有文字的选择列表。 有可能做这样的事情吗？我假设它会将 jquery 包含在工作中。但是我在网上找不到任何答案。

好吧，我花了一整天的时间让它工作，但我想我太愚蠢了。在每个可能的示例和解决方案中，我在使其工作时遇到了一些问题。

这是我使用的元框的完整代码http://pastebin.com/1kvYz8Mg 它用于 wordpress 主题，其他一切都按我的需要工作，唯一我无法得到的是如果我可以将选择框替换为某种图像列表以进行选择适合字段的图像。

Answer 1

试试这个：

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>

Answer 2

我可能会使用 RADIO 按钮列表，并将 LABEL 标签内的图像附加到每个 RADIO INPUT。

这是一个简单的 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);
    }
}

Answer 3

Here's a try with almost pure 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）将存储图像的索引...

(fiddle)

Answer 4

为此，您需要将相应的图像放在各自单独的“div”块中，其中每个 div 设置为 display:none。

例如

 <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 添加到您的 .现在您可以更改选择下拉菜单，显示的图像也会发生变化。

注意：没有尝试就写了，可能在某处有分号错误，谁知道呢。

Answer 5

我想你正在寻找这样的东西：Javascript image dropdown 2.0

Answer 6

此示例使用 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\')">
';

我肯定会有更好的方法来做到这一点，但它确实有效

Answer 7

<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>