1
我真的需要你的幫助。使用jQuery觸發自定義UL LI框中的更改事件
如何修改代碼，以便我可以在自定義UL LI框中獲取更改事件。例如，如果用戶要改變蔬菜或水果盒，代碼會提醒用戶已做出改變？
這裏是下面的完整的標記：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
margin: 0;
padding: 0;
}
.select dd, .select dt, .select ul {
margin: 0px;
padding: 0px;
}
.select dd {
position: relative;
}
.select a, .select a:visited {
color: #000;
text-decoration: none;
outline: none;
}
.select dt:hover, .select dd ul:hover {
border-color: rgb(128,128,128);
}
.select dd ul li a:hover {
background-color: rgb(112, 146, 190);
color: #FFF;
}
.select dt {
background: url(arrow.png) no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid rgb(170, 170, 170);
width: 180px;
overflow: hidden;
}
.select dt span {
cursor: pointer;
display: block;
padding: 4px;
height: 15px;
}
.select dd ul {
background: #fff none repeat scroll 0 0;
border-bottom: 1px solid rgb(170, 170, 170);
border-left: 1px solid rgb(170, 170, 170);
border-right: 1px solid rgb(170, 170, 170);
border-top: 0;
display: none;
left: 0px;
padding: 5px 0px;
position: absolute;
top: -1px;
width: auto;
min-width: 200px;
list-style: none;
}
.select dd ul li a {
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
display: block;
}
.selected {
background: rgb(195, 195, 195);
}
.header-list, .header-list:hover {
padding-left: 3px;
font-weight: bold;
font-style: italic;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".select dt").click(function(e) {
e.stopPropagation();
var select = $(this).closest('.select');
// close all other selects
$('.select').not(select).find('ul').hide();
select.find('ul').toggle();
select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')
});
$(".select dd ul li a").click(function(e) {
var text = $(this).html();
var select = $(this).closest('.select');
if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
e.stopPropagation()
$(this).addClass('selected');
select.find('dt span').html("(" + select.find('a.selected').length + ")");
}
else {
var text = $(this).html();
select.find("dd a").removeClass('selected');
$(this).addClass('selected');
select.find("dt span").html(text);
//select.find("dt a").css("background-color", "");
select.find("dd ul").hide();
}
});
$(document).bind('click', function() {
$(".select dd ul").hide();
$(".select dt, .select dd ul").css('border-color', '');
});
});
</script>
</head>
<body>
<dl class="select">
<dt><span id="vegetables"></span></dt>
<dd>
<ul>
<li><a href="#"> </a></li>
<li><a href="#">Carrots</a></li>
<li><a href="#">Celery</a></li>
<li><a href="#">Brocoli</a></li>
</ul>
</dd>
</dl>
<dl class="select">
<dt><span id="fruits"></span></dt>
<dd>
<ul>
<li><a href="#"> </a></li>
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Bananas</a></li>
</ul>
</dd>
</dl>
</body>
</html>
，美結合的Click事件到自定義選擇的事實似乎是正確的做法。它不工作？ – Mox