[英]How to make custom Select Boxes in HTML using CSS and JavaScript/jQuery?
I was searching for custom Select Boxes and stumbled across this URL. 我在搜索自定义选择框,却偶然发现了该 URL。
I was trying to understand how the boxes work and following is what I got from it: 我试图了解这些盒子是如何工作的,以下是我从中得到的信息:
select
element with options and another div
which is a sibling to the select
which holds a list of the same items. select
元素和另一个div
,它是select
的同级兄弟,其中select
包含相同项目的列表。 display
of the select
is set to none
so that it doesn't show up. select
的display
设置为none
,因此不会显示。 The reason is that the select
is just to submit the data when the form gets submitted but will not be shown on the page. select
仅在提交表单时提交数据,而不会在页面上显示。 Instead, the other div
with the list is shown and will act as the interaction element. div
,它将用作交互元素。 Now I know how to make the other div
look like a select element through CSS. 现在,我知道如何通过CSS使另一个
div
看起来像一个select元素。 What I'm not getting is how to "link" between the other div
with the actual select
element. 我没有得到的是如何在另一个
div
与实际的select
元素之间“链接”。 Like, how to select the option from the select
element when I click on one of the list item and also how to display that item on the front? 就像,当我单击列表项之一时,如何从
select
元素中选择选项,以及如何在前面显示该项? Basically, how to make the other div
act like a select
element? 基本上,如何使另一个
div
充当select
元素?
After some searching i found this, I think you are looking for this 经过一番搜索,我发现了这个,我认为您正在寻找这个
// Iterate over each select element $('select').each(function() { // Cache the number of options var $this = $(this), numberOfOptions = $(this).children('option').length; // Hides the select element $this.addClass('s-hidden'); // Wrap the select element in a div $this.wrap('<div class="select"></div>'); // Insert a styled div to sit over the top of the hidden select element $this.after('<div class="styledSelect"></div>'); // Cache the styled div var $styledSelect = $this.next('div.styledSelect'); // Show the first select option in the styled div $styledSelect.text($this.children('option').eq(0).text()); // Insert an unordered list after the styled div and also cache the list var $list = $('<ul />', { 'class': 'options' }).insertAfter($styledSelect); // Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('<li />', { text: $this.children('option').eq(i).text(), rel: $this.children('option').eq(i).val() }).appendTo($list); } // Cache the list items var $listItems = $list.children('li'); // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again) $styledSelect.click(function(e) { e.stopPropagation(); $('div.styledSelect.active').each(function() { $(this).removeClass('active').next('ul.options').hide(); }); $(this).toggleClass('active').next('ul.options').toggle(); }); // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item // Updates the select element to have the value of the equivalent option $listItems.click(function(e) { e.stopPropagation(); $styledSelect.text($(this).text()).removeClass('active'); $this.val($(this).attr('rel')); $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */ }); // Hides the unordered list when clicking outside of it $(document).click(function() { $styledSelect.removeClass('active'); $list.hide(); }); });
body { padding: 50px; background-color: white; } .s-hidden { visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font: normal 11px/22px Arial, Sans-Serif; color: black; border: 1px solid #ccc; } .styledSelect { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: white; padding: 0 10px; font-weight: bold; } .styledSelect:after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-color: black transparent transparent transparent; position: absolute; top: 9px; right: 6px; } .styledSelect:active, .styledSelect.active { background-color: #eee; } .options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0 0; padding: 0 0; list-style: none; border: 1px solid #ccc; background-color: white; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .options li { padding: 0 6px; margin: 0 0; padding: 0 10px; } .options li:hover { background-color: #39f; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectbox1"> <option value="">Select an option…</option> <option value="aye">Aye</option> <option value="eh">Eh</option> <option value="ooh">Ooh</option> <option value="whoop">Whoop</option> </select> <select id="selectbox2"> <option value="">Month…</option> <option value="january">January</option> <option value="february">February</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select>
$("#myselect").change(function(){ alert($( "#myselect option:selected" ).text()); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.