<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="<#ZC_BLOG_LANGUAGE#>" />
<title>下拉框与输入框动态切换</title>
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#changeItem").bind("click", function() {
var flag = $("#inputer").is(":visible"); //判断元素显示或隐藏状态
$("#inputer").toggle(1,function(){
$("#selecter").toggle(flag);
if ( $("#changeItem").attr("value") == "下拉"){
$("#changeItem").val("输入") ;
}
else{
$("#changeItem").val("下拉") ;
}
});
});
});
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td align="left" width="190">
<input type="text" name="inputer" id="inputer"
style="width: 190px; height: 20px; margin: -2px;"/ >
<select name="selecter" id="selecter"
style="width: 190px; height: 20px; margin: -2px; display: none;">
<option value="">
请选择.....
</option>
<option value="1">
一级领导
</option>
<option value="2">
主管领导
</option>
<option value="3">
一般科员
</option>
<option value="4">
一般文员
</option>
</select>
</td>
<td align="left" width="190">
<input type="button" style="" id="changeItem" value="下拉" />
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
3. **布局调整**：通过CSS的布局属性（如`display`, `flexbox`, `grid`），可以灵活调整下拉框与输入框的相对位置，创建各种布局模式。 4. **动画过渡**：使用CSS的`transition`和`animation`属性，可以为下拉框的...
2. **DOM操作**：利用`$(selector).show()`或`$(selector).hide()`控制下拉框的显示与隐藏。同时，可以通过`$(selector).html(content)`改变下拉框的选项内容。 3. **数据交互**：根据用户在上一级下拉框的选择，...
"Jquery可编辑下拉框控件"是一种基于jQuery的组件，它提供了更丰富的用户交互体验，允许用户在下拉框中进行编辑，不仅可以选择已有选项，还能输入自定义内容。这样的控件对于数据录入或搜索场景特别有用，因为它结合...
在jQuery库的支持下，实现这种“带搜索功能的下拉框”变得非常简单。这里我们将深入探讨`searchableSelect`插件，它是jQuery的一个扩展，专门用于创建具有搜索功能的下拉框。 `jQuery searchableSelect` 插件提供了...
本项目"jquery实现百度搜索关键字输入下拉框提示"是利用 jQuery 实现类似百度搜索框的功能，即用户在输入框中输入关键词时，能实时显示与关键词相关的下拉提示，提高用户的搜索体验。 首先，`index.html` 是网页的...
本项目“jQuery下拉框国家选择代码”是为网页开发者提供的一款实用工具，它允许用户在下拉菜单中选择全世界的国家，并且具备搜索功能和国旗图标显示，提升了用户体验。 首先，我们要了解jQuery如何实现下拉框的动态...
综上所述，实现"jQuery支持模糊查询下拉框菜单选择代码"涉及了jQuery基础、事件监听、DOM操作、模糊查询逻辑以及前端工程化的实践。通过结合这些知识点，我们可以构建出一个响应迅速、用户友好的模糊查询下拉框。
在IT界，尤其是在前端开发中，"带输入框的下拉框"是一种常见的用户界面元素，它结合了传统的下拉选择框与输入框的功能，提高了用户在数据筛选和选择时的效率。这种设计通常用于当选项众多或者用户可能需要通过关键词...
在本主题中，我们将探讨如何在jQuery下拉框（Select元素）中集成搜索功能，以便用户能更高效地找到所需选项。这个功能在大型数据集或分类繁多的下拉菜单中尤其有用。 首先，我们需要理解jQuery的基本用法。jQuery...
本文将深入探讨如何使用JavaScript实现一个可编辑的下拉框，并阐述其核心知识点。 ### 1. 可编辑下拉框的概念 传统的下拉框允许用户从预定义的选项中进行选择，但不支持用户直接在框内输入自定义值。而可编辑...
`jquery.js`是jQuery库本身，它是实现动态效果和交互的基础。在项目中，我们首先需要引入这个库，确保可以使用jQuery提供的所有功能。 `dtreeck.js`是自定义的JavaScript插件文件，实现了点击输入框后显示下拉列表...
本篇将详细解析如何利用jQuery 1.3版本来实现类似于Google搜索建议那样的自动下拉框功能。 #### 二、关键技术点介绍 在本例中，我们主要使用了jQuery库以及简单的JavaScript来实现自动下拉框功能。下面将详细介绍...
在本篇文章中，我们将探讨“jQuery可编辑的下拉框ComboBox”，这是一种结合了输入框和下拉列表功能的控件，为用户提供了更灵活的数据选择方式。相关说明可以在http://www.cnblogs.com/strick/p/3884721.html找到。 ...
jquery实现动态添加文本框和下拉框效果。
然而，通过结合使用jQuery库，我们可以实现具有复选框功能的多选下拉框，这为用户提供更直观的选择体验。 ### jQuery简介 jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理、动画效果以及Ajax...
在jQuery插件中，通常会监听`input`事件，当用户输入时，获取输入框的值，然后与下拉框中的选项进行比对，动态更新显示的选项列表。 **五、实现原理** 1. **DOM操作**：使用jQuery选择器选取需要操作的元素，如`$...
1. **增强可定制性**：jQuery插件允许开发者根据项目需求自由调整下拉框的外观和行为，如颜色、大小、动画效果等。 2. **提升用户体验**：通过添加过渡效果和交互反馈，使用户在操作下拉框时有更流畅的感受。 3. **...
本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框，以提升用户在交互时的体验。 首先，我们需要了解 `select` 元素在HTML中的基本用法。`<select>` 标签用于创建一个下拉列表，用户可以...
3. **组合设计**：将下拉框与文本框组合，通常是通过JavaScript或jQuery等前端库实现的。这种方式可以提供一个可搜索的下拉列表，用户既可以快速选择列表中的选项，也可以在输入框中手动输入。这种设计提高了用户...
接下来，我们利用jQuery来动态加载和管理下拉框的内容。为了简化，我们可以先创建一个静态的数据源，例如一个JavaScript数组，然后在用户输入时过滤这些选项： ```javascript var options = [ {value: 'option1', ...