鍍金池/ 問答/HTML5  HTML/ select旁邊有個圖片,點擊圖片如何觸select???

select旁邊有個圖片,點擊圖片如何觸select???

clipboard.png

有沒有遇到過同樣的問題

回答
編輯回答
不二心

input 外面包一層父極,圖片作為背景圖,input設置背景為透明,background:transparent;
不考慮ie,給你的小圖標那一層加屬性:pointer-events: none;

2018年8月22日 09:46
編輯回答
兔囡囡

你外層用一個label 包住就能實現你這個功能,要不給 圖片 加事件 可以利用 jquery的 trigger方法 觸發(fā) select picElement(圖片元素).on('click',function(){

selectElement下拉框元素).trigger("select");

})

2018年5月27日 05:09
編輯回答
愚念

如果用的是select的標簽的話,可以用透明度遮蓋,調一下層級,直接點擊的就可以的,如果想用js解決的話,可以根據樓上的那樣寫

2017年5月26日 19:26
編輯回答
北城荒

抱歉抱歉,沒有測試直接發(fā)錯誤代碼,對不起;看這個 demo

原理:
1、你可以直接通過修改 select 的 size 屬性來實現,但是這樣比較丑,很明顯;
原來:

clipboard.png

修改 size:

clipboard.png

跟原生比丑在兩點:

1)位置上移了
2)滾動條出現了

2、比較好的實現,就是通過 js clone 一個 select,原來的 select 暫且稱為 selectA,克隆后的 select 暫且稱為 selectB;

題主這邊點擊 img 的時候,修改 selectB 的 size,這個時候option就都出來了,然后把它往下移到selectA 下面,解決了位置的問題;

然后修改寬度和overflow屬性,一般情況下,比如 option 少于 10條時,不顯示滾動條;大于 10 條時,再顯示滾動條;這樣就模擬了selectA 的點擊情況,解決了滾動條的問題;

最后再監(jiān)聽 selectB 的 change 事件來修改 selectA 的值;

參考文檔:

Simulate click on select element with jQuery

2017年1月23日 08:19