Ross Wan's World!

Python, Ajax, PHP and Linux.

jQuery:下拉列表中“其它”选项的一个简单解决方案

Posted by Ross Wan 于 2008/08/27

对于下拉列表的选项,我们有时候是不可能将所有的选项都包括进去的,于是会在最后提供“其它”这个选项,然后期望用户在出现的文本框中输入自己的文本。下面就是利用 jQuery 来现实这个功能。

示例:http://www.flexiblephilosophy.com/leader.php


<script type=”text/javascript”>
$(function () {

$(‘.leader’).each( function () {
var name = $(this).attr(‘name’);

if ($(this).val()!=’other’) {
$(this).next().removeAttr(‘name’).hide();
}
});

$(‘.leader’).change(onChange);

function onChange(){
var desiredName = $(this).attr(‘name’);
if ($(‘#’+desiredName).val()==’other’) {
$(‘#’+desiredName).next().attr(‘name’,desiredName).fadeIn(‘fast’);
}
else {
$(‘#’+desiredName).next().removeAttr(‘name’).fadeOut(‘fast’);
}
}

});
</script>



当“其它”选项被选择时,下拉列表的 name 属性会被移除,然后显示文本框,并设置其 name 属性为下拉列表原先的 name 属性。


参考资料:http://itknowledgeexchange.techtarget.com/web-standards/jquery-tutorial-select-to-input-toggle/

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

 
%d 博主赞过: