图片选择框而不是文字选择？

即时通讯创建WordPress的主题，我需要有选择框，我可以点击并显示图像来选择。图片选择框而不是文字选择？

当前为了这个功能我有选择文本下拉列表。

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

但我需要有一些与图像和没有文字的选择列表。有没有可能做这样的事情？我认为它会包括jQuery的工作。但我无法在网上找到任何答案。

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

这里是我使用metabox的整个代码http://pastebin.com/1kvYz8Mg它是为wordpress主题和其他一切正常工作，因为我需要，只有我不能得到它的东西是如果我可以将选择框替换为某种图像列表来选择适当一个领域的图像。

来源

2013-02-07 Aleksandar Đorđević

如果你所替换图像标签的文本？ – kidwon

不使用标准表单元素，不。您必须使用分层HTML创建“假选择”。 [插件存在]（http://www.google.com/?q=image+form+dropdown） – Blazemonger

试试这个：

的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-07 15:09:14

这也可能工作，但我有一些问题。在第一次加载时，它会显示所有图像，并且在用箭头滚动时不会更改图标，只有在用鼠标选择时才会更改图标。 –

要做到这一点，你需要让你的相应的图像在自己的单独的“div”块，其中每个div设置为显示：无。

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>

然后，您需要添加一个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-07 15:17:29 skidadon

使用'$（“＃0，＃1，＃2”）。hide（）;'而不是定义它们1by1。 –

根据Barlas的评论更新。很好的使用jquery。韩国社交协会。 – skidadon

我可能会使用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-07 15:35:35

我已经知道无线电输入图像解决方案，但问题是，在最后，我将不得不创建多个选择框共55个选择元素为每个选择列表，并使用单选按钮将使大乱，这就是为什么我要去解决方案选择图像下拉框。 –

@AleksandarĐorđević - 您只需使用CSS简单地设置包含元素的样式即可。说给它一个最大高度，必要时添加滚动条等等。如果你的图像是一致的大小，这变得非常容易实现。你甚至可以显示：没有隐藏RADIO按钮，只有图像的标签。 –

看了很多其他样本和例子后，我甚至可能会选择单选按钮而不是选择框，只是看看我是否可以让它看起来更有吸引力。例如，要显示一个无线电框，点击打开其他图像列表，而不是点击要选择的图像。我再次假设为这个jquery将包括在内。 –

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）

来源

2013-02-07 18:28:50

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

来源

2013-02-07 23:29:32 pwolaq

这也不起作用，它会加载到第一个选择列表上，但无法加载到其他列表上。 –

这个例子是使用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-29 12:07:28 Arcticwarrio

<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-31 06:40:31 user3675957

图片选择框而不是文字选择？

回答

相关问题