圖片選擇框而不是文字選擇？

即時通訊創建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

圖片選擇框而不是文字選擇？

回答

相關問題