HTML chọn kích hoạt bởi một div hoặc một hình ảnh

Tôi có một menu <select> tương tự như ví dụ dưới đây:HTML chọn kích hoạt bởi một div hoặc một hình ảnh

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select>

Trên một số trang web, I have seen that menu này có thể được kích hoạt thông qua một hình ảnh bên ngoài hoặc div.

Tôi đã tìm kiếm trên google nhưng hầu hết các câu hỏi và câu trả lời có liên quan đến cách liệt kê hình ảnh bên trong một lựa chọn, không phải là những gì tôi cần. Tôi muốn chọn menu xuất hiện khi một DIV hoặc một hình ảnh được nhấp.

Tôi làm cách nào để kích hoạt menu được chọn này thông qua một lần nhấp đến một phần tử DOM khác, tức là div?

PS. Trang web của tôi đã có jQuery bao gồm.

Nguồn

2013-02-16 Phil

Bạn không thể trừ khi bạn sử dụng một số hộp chọn tùy chỉnh làm bằng 'divs' và v.v. – dfsq

@dfsq, điều đó không thực sự chính xác. Nhiều trang web sử dụng loại "skinning" này. – Phil

Tôi không nghĩ rằng nó có thể, những trang web có thể đang sử dụng một menu tùy chỉnh thực hiện trông giống như bản gốc. như thế này https://github.com/claviska/jquery-selectBox –

-2

Sự kiện .change jQuery sẽ phát hiện nếu giá trị của trường chọn đã thay đổi sau đó bạn có thể thực hiện hành động jQuery để hiển thị hình ảnh của bạn.

Bạn có thể sử dụng. Nhấp chuột nhưng sẽ rất lộn xộn. Tốt nhất để sử dụng .change.

http://api.jquery.com/change/

Nguồn

2013-02-16 12:08:46

Tôi KHÔNG muốn hiển thị bất kỳ hình ảnh nào. Tôi muốn một menu chọn xuất hiện khi một div hoặc một hình ảnh được nhấp. – Phil

-1

Đây là một nút dụ cũng sẽ kích hoạt lựa chọn bằng cách sử dụng chức năng jquery kích hoạt

<!DOCTYPE html> 
    <html> 
    <head> 

    <style> 

    button { margin:10px; } 

    div { color:blue; font-weight:bold; } 

    span { color:red; } 

    </style> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    </head> 

    <body> 

    <select id = "slt"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

    <button id="btn">Button #2</button> 

    <div><span>0</span> button #1 clicks.</div> 

    <div><span>0</span> button #2 clicks.</div> 

    <script> 
$("#slt").change(function() { 

update($("span:first")); 

}); 

$("button:last").click(function() { 

$("#slt").trigger('change'); 

update($("span:last")); 

});  
    function update(j) { 

var n = parseInt(j.text(), 10); 

j.text(n + 1); 

} 

    </script> 

    </body> 

    </html>

Nguồn

2013-02-16 12:11:55

Vui lòng sửa định dạng của bạn –

Chọn mã của bạn và thụt lề bằng nút '{}' (4 dấu cách). – dfsq

Ngoài ra, câu hỏi của OP liên quan đến các phần tử 'select' được kích hoạt, hoạt động khác với các phần tử' nút'. Ví dụ, bạn không thể gọi đơn giản là '.trigger ('click')' trên các lựa chọn và mở chúng ra. ([example] (http://jsfiddle.net/XccPC/1/)) –

Khi bạn nói "Tôi muốn chọn menu để xuất hiện", tôi giả sử bạn muốn để chọn một giá trị cụ thể trong danh sách thả xuống/chọn, khi người dùng nhấp vào một div cụ thể được nhấp vào.

Điều đầu tiên bạn cần làm là cung cấp ID cho thẻ đã chọn (nói "dropdownList") và cho mọi tùy chọn trong danh sách (nói "option1", "option2", "option3", "option4") . Giả sử có 4 div khác nhau (nói "div1", "div2", "div3", "div4"), khi nhấp vào chọn giá trị khác trong danh sách thả xuống. Bạn có thể làm điều này -

$("#div1").on("click",function(){$("dropdownList").val("option1");}); $("#div2").on("click",function(){$("dropdownList").val("option2");}); $("#div3").on("click",function(){$("dropdownList").val("option3");}); $("#div4").on("click",function(){$("dropdownList").val("option4");});

Bạn luôn có thể tối ưu hóa nó bằng cách gói div 4 trong một div thầy gọi là "masterDiv", và sau đó -

$("#masterDiv div").on("click",function(e){ $("#dropdownList option:selected").removeAttr("selected"); \\remove currently selected value $("#option"+e.target.id.charAt(e.target.id.length-1)).attr("selected","selected"); });

Hy vọng điều này sẽ giúp.

Nguồn

2013-02-16 23:15:47

Ở đây tôi đã mã hóa số script on JSFiddle để dễ dàng chọn các tùy chọn khác nhau từ menu thả xuống bằng cách sử dụng div bên ngoài.

HTML:

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<nav> 
    <div data-value="volvo">volvo</div> 
    <div data-value="saab">saab</div> 
    <div data-value="mercedes">mercedes</div> 
    <div data-value="audi">audi</div> 
</nav>

CSS:

select { 
    display:block; 
    margin:0 0 10px; 
} 
div { 
    padding:5px 10px; 
    margin:0 0 5px; 
    border:solid 1px #ccc; 
    background:#eee; 
    cursor:pointer; 
}

JS:

$(document).ready(function(){ 
    var select = $("select"), 
     value = ""; 

    $("div").on("click",function(){ 
     value = $(this).attr("data-value"); // Store the value of the clicked div   
     select.find('option[value="'+ value +'"]') // Match the option with the value we get before 
      .prop("selected",true) // Assign it selected attr 
      .end() // Go back to the select 
       .trigger("change"); // Trigger the change to see the change reflected on the select 
    }); 
});

Dựa trên kịch bản này, bạn có thể tăng rất nhiều các chức năng bằng cách thêm ví dụ url với nhau tùy chọn (ví dụ: data-link = "http://google.com") và window.location nó trên thay đổi, hoặc bất cứ điều gì bạn muốn.

Dù sao nếu bạn muốn một plugin thực sự kick-ass để làm cho nó tự động tôi đề xuất các msDropdown (Documentation here).

Plugin này giúp bạn tạo các lựa chọn tùy chỉnh với hình ảnh, mô tả và nhiều tính năng khác bằng cách liên kết đơn giản với thẻ chọn hoặc với thông tin json. Hy vọng là những gì bạn đang tìm kiếm.

Nguồn

2014-04-14 20:59:02

HTML chọn kích hoạt bởi một div hoặc một hình ảnh

Trả lời

Các vấn đề liên quan