显示/隐藏 <选择>下拉列表，使用 jQuery，基于值 [英] Show/Hide <select> dropdown, with jQuery, based on value
本文介绍了显示/隐藏 <选择>下拉列表，使用 jQuery，基于值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个自定义下拉列表，该列表根据其选择显示/隐藏第二组下拉列表.
I'm trying to build a custom dropdownlist which show/hide a second set of dropdowns based on it's selection.
我想知道这里是否有人可以帮助解决这个问题.
I was wondering if anyone here might be able to help with a solution to this.
var i = 0;
$(document).ready(function() {
var bindClickToToggle = function(element) {
element.click(function() {
$(this).parents('.dropdown').find('dd ul').toggle();
});
};
var bindClickToUpdateSelect = function(element) {
element.click(function() {
var text = element.html();
var value = element.find('span.value').html();
var dropdown = element.parents('.dropdown');
var select = $(dropdown.attr('target'));
dropdown.children('dt').find('a').html(text);
dropdown.find('dd ul').hide();
select.attr('value', value);
});
};
var getItemHtml = function(element) {
return '<dt><a href="#">' + element.text() + '<span class="value">' + element.attr('value') + '</span></a></dt>';
};
var getDropdownHtml = function(id, target) {
return '<dl id="target' + id + '" class="dropdown" target="#' + target.attr('id') + '"></dl>';
};
var getEnclosingHtml = function() {
return '<dd><ul></ul></dd>';
};
var createDropDown = function(element, appendTo) {
var selected = element.find('option[selected]');
var options = element.find('option');
appendTo.append(getDropdownHtml(i, element));
var target = appendTo.find('#target' + i);
target.append(getItemHtml(selected));
target.append(getEnclosingHtml());
var appendOptionsTo = target.find('ul');
options.each(function() {
appendOptionsTo.append(getItemHtml($(this)));
});
appendOptionsTo.find('a').each(function() {
bindClickToUpdateSelect($(this));
});
i++;
};
$('select').each(function() {
createDropDown($(this), $('body'));
});
$('a').each(function() {
bindClickToToggle($(this));
$(this).click(function() {
$(this).parents('ul').hide();
});
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$(".dropdown dd ul").hide();
}
});
});body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.75em;
color: #000;
}
.desc {
color: #6b6b6b;
}
.desc a {
color: #0092dd;
}
.dropdown dd,
.dropdown dt,
.dropdown ul {
margin: 0px;
padding: 0px;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #816c5b;
text-decoration: none;
outline: none;
}
.dropdown a:hover {
color: #5d4617;
}
.dropdown dt a:hover {
color: #5d4617;
border: 1px solid #d0c9af;
}
.dropdown dt a {
background: #e4dfcb url(arrow.png) no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid #d4ca9a;
width: 160px;
padding: 5px;
}
.dropdown dt a span {
cursor: pointer;
display: block;
}
.dropdown dd ul {
background: #e4dfcb none repeat scroll 0 0;
border: 1px solid #d4ca9a;
color: #C5C0B0;
display: none;
left: 0px;
padding: 5px 0px;
position: absolute;
top: 2px;
width: auto;
min-width: 170px;
list-style: none;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #d0c9af;
}
.dropdown img.flag {
border: none;
vertical-align: middle;
margin-left: 10px;
}
.flagvisibility {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally.</p>
<div id="log"></div>
<select id="source">
<option selected="selected" value="BR">Brasil</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
</select>
<select id="source2a">
<option selected="selected" value="BR">Cities in France</option>
<option value="FR">France City 1</option>
<option value="DE">France City 2</option>
<option value="IN">France City 3</option>
<option value="JP">France City 4</option>
<option value="RS">France City 5</option>
<option value="UK">France City 6</option>
<option value="US">France City 7</option>
</select>
<select id="source2b">
<option selected="selected" value="BR">Cities in Germany</option>
<option value="FR">Germany City 1</option>
<option value="DE">Germany City 2</option>
<option value="IN">Germany City 3</option>
<option value="JP">Germany City 4</option>
<option value="RS">Germany City 5</option>
<option value="UK">Germany City 6</option>
<option value="US">Germany City 7</option>
</select>
<select id="source2c">
<option selected="selected" value="BR">Cities in India</option>
<option value="FR">India City 1</option>
<option value="DE">India City 2</option>
<option value="IN">India City 3</option>
<option value="JP">India City 4</option>
<option value="RS">India City 5</option>
<option value="UK">India City 6</option>
<option value="US">India City 7</option>
</select>推荐答案
use the jquery :selected 这里有一点文档 http://api.jquery.com/selected-selector/
use the jquery :selected a little bit of documentation is here http://api.jquery.com/selected-selector/
这适用于选项选择菜单
如果你能给我更多关于你想做的事情的信息，我现在正在更新你的 Jfiddle.
I am updating your Jfiddle now if you can give me a little more info about what you want done.
编辑
这是您的答案的更新 jfiddle.http://jsfiddle.net/stAAm/7/
Here is an updated jfiddle with your answer. http://jsfiddle.net/stAAm/7/
以及堆栈溢出代码的副本
and a copy of the code for Stack overflow
$('#source').change(function () {
if ($('#source option:selected').text() == "France"){
$('.cities').hide();
$('#source2a').show();
} else if ($('#source option:selected').text() == "Germany"){
$('.cities').hide();
$('#source2b').show();
} else if ($('#source option:selected').text() == "India"){
$('.cities').hide();
$('#source2c').show();
} else {
$('.cities').hide();
} });
这篇关于显示/隐藏 <选择>下拉列表，使用 jQuery，基于值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
