【问题标题】:Image select box instead of text select?图像选择框而不是文本选择?
【发布时间】:2013-01-23 03:11:35
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

  • 如果把文字换成图片标签会怎样?
  • 不使用标准表单元素,不。您必须使用分层 HTML 创建一个“假选择”。 Plugins exist

标签: jquery wordpress select dropdownbox


【解决方案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>

【讨论】:

  • 这也可能有效,但我有一些问题。在第一次加载时它会显示所有图像,当使用箭头滚动时它不会更改图标,只有在使用鼠标选择时才会更改。
【解决方案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);
    }
}

【讨论】:

  • 我已经知道单选输入图像解决方案,但问题是最后我必须为每个选择列表创建多个选择框,总共有 55 个选择元素,并且使用单选按钮会造成巨大的混乱,那就是为什么我想去选择图片下拉框的解决方案。
  • @Aleksandar Đorđević - 您只需使用 CSS 适当地设置包含元素的样式。说给它一个最大高度,在必要时添加滚动条等等。如果你的图像是统一的大小,这变得很容易实现。您甚至可以 display:none 隐藏 RADIO 按钮,只使用带有图像的标签。
  • 在查看了许多其他示例和示例之后,我什至可能会选择单选按钮而不是选择框,我只是看看我是否可以让它在视觉上更具吸引力。例如,让一个单选框可见,单击以打开其他图像列表,而不是单击要选择的图像。我再次假设这个 jquery 将被包括在内。
【解决方案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)

【讨论】:

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

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

    【讨论】:

    • 使用 $("#0,#1,#2").hide(); 代替 1by1 定义它们。
    • 根据 Barlas 的评论更新。很好地使用jquery。谢了。
    【解决方案5】:

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

    【讨论】:

    • 这也不起作用,它在第一个选择列表上加载,但在其他列表上加载失败。
    【解决方案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\')">
    ';
    

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

    【讨论】:

      【解决方案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>
      

      【讨论】:

      • 这对 PHP 中的动态等所有新类型都有好处
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-15
      • 2020-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多