Question

我正在为wordpress创建主题，我需要选择框，我可以点击并显示要选择的图像。

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

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

但是我需要有一些带图像的选择列表而没有文字。有可能做那样的事吗？我认为它将包括jquery进入工作。但我无法在网上找到任何答案。

好的，我花了一整天时间才能让它发挥作用，但我想我太傻了。在每个可能的示例和解决方案上，我都有一些问题，使其工作。

以下是metabox的完整代码我使用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

要做到这一点，您需要将相应的图像放在各自的“div”块中，其中每个div设置为display：none。

E.g。

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

然后，您需要在select中添加onchange事件处理程序，以使图像显示为块。 E.g。

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

我可能会使用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 4

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

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

7 个答案: