3

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

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

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

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

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

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

4

7 回答 7

0

Try this:

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>
于 2013-02-07T15:09:14.277 回答
0

为此，您需要将相应的图像放在各自单独的“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 添加到您的 . 现在您可以更改选择下拉菜单，并且显示的图像也会更改。

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

于 2013-02-07T15:17:29.073 回答
0

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

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

于 2015-01-29T12:07:28.723 回答
0

我可能会使用 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);
    }
}
于 2013-02-07T15:35:35.207 回答
0

这是一个几乎纯 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) 将存储图像的索引...

（小提琴）

于 2013-02-07T18:28:50.550 回答
0

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

于 2013-02-07T23:29:32.210 回答
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>
于 2017-05-31T06:40:31.997 回答