`
eric_hwp
  • 浏览: 126686 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery的change 事件 .

 
阅读更多
<script src="jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('#mySelect').change(function(){
alert($(this).children('option:selected').val());
var p1=$(this).children('option:selected').val();//这就是selected的值
var p2=$('#param2').val();//获取本页面其他标签的值
window.location.href="xx.php?param1="+p1+"¶m2="+p2+"";//页面跳转并传参
})
})
</script>

<select id="mySelect">
<option value="1">one</option>
<option value="2" selected="selected">two</option>
<option value="3">three</option>
</select>
<input type="text" value="ooo" name="param2" id="param2"/>


jquery获取select选择的文本与值
获取select 选中的 text : $("#ddlregtype").find("option:selected").text();
获取select选中的 value: $("#ddlregtype ").val();

获取select选中的索引: $("#ddlregtype ").get(0).selectedindex;


1、获取选中select的value和text,html代码如下:

 

<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select> 


则可通过以下script代码s来获取选中的value和text

 

 

$("#mySelect").val(); //获取选中记录的value值
$("#mySelect option:selected").text(); //获取选中记录的text值 


2、运用new Option("文本","值")方法添加选项option

 

 

var obj = document.getElementById("mySelect");
obj.add(new Option("4","4")); 

3、删除所有选项option

var obj = document.getElementById("mySelect");
obj.options.length = 0; 


4、删除选中选项option

 

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index); 


5、修改选中选项option

 

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态


6、删除select

 

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象 


7、select选择的响应事件

 

$("#mySelect").change(function(){
//添加所需要执行的操作代码
}) 



分享到:
评论

相关推荐

    jquery-1.8.3.js 、jquery-1.8.3.min.js 【官方jquery包 js】

    事件处理则通过`$(selector).on('event', handler)`进行,支持多种事件类型,如点击(click)、改变(change)等。动画效果通过`.animate()`方法实现,可以创建平滑的过渡效果。至于Ajax,`$.ajax()`函数是其核心,...

    jquery.nestable.js示例

    $('#nestable').on('change', function () { console.log('Tree structure has been updated.'); }); ``` - **数据序列化与反序列化**:`serialize()` 和 `deserialize()` 方法可以将树形结构转换为 JSON 数据,...

    jquery-3.1.1.js 、jquery-3.1.1.min.js 【jquery包 js】

    此外,还有`.click()`, `.hover()`, `.change()`等便捷的事件处理函数。 3. **选择器**:jQuery扩展了CSS选择器,使得选取元素更加方便,例如,`.children()`, `.siblings()`, `.parent()`, `.find()`等,以及更...

    jquery.rangecss.rar

    5. 可以通过`.on('change'...)`事件监听用户的选择变化,进行相应的业务逻辑处理。 为了增强用户体验,开发者还可以利用jQuery提供的动画功能,为滑块的移动添加平滑过渡效果。此外,根据实际需求,可能需要对`...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    - **事件处理**:通过`.click()`, `.hover()`, `.change()`等方法,可以轻松处理各种用户交互事件。 - **AJAX请求**:`.ajax()`, `.get()`, `.post()`等方法使得异步数据交换变得简单,同时,`.load()`可以实现...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    - **事件处理**:通过`.on()`, `.click()`, `.change()`等方法,可以轻松地绑定和处理各种事件。 - **动画效果**:`fadeIn()`, `slideUp()`, `animate()`等方法让创建动态效果变得直观。 - **Ajax交互**:`$.ajax...

    jquery跑马灯轮播图插件jquery.roundabout.js

    总结,jQuery.roundabout.js是一款强大且灵活的轮播图插件,它提供了丰富的选项和事件,使得开发者可以根据项目需求轻松定制出独特且吸引人的跑马灯效果。通过深入了解和实践,你可以充分利用其潜力,为用户带来更...

    jquery1.7 API/jquery-1.7.1.min.js/jquery-1.7.1.js

    jQuery提供了一系列的事件处理方法,如`.click()`, `.change()`, `.hover()`, `.keydown()`等,这些方法使事件处理更加简便。 6. **jQuery DOM操作**: 包括元素的创建与插入(`$(html)`, `.append()`, `.prepend...

    jquery-1.9.1.min.js

    2. 事件处理:jQuery简化了事件绑定的过程,$.fn.click()、$.fn.change()等方法可以直接绑定事件监听器,而$.fn.unbind()可以方便地解除绑定。同时,$.fn.delegate()和$.fn.on()支持事件委托,提高了性能。 3. 动画...

    jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包,最新的截止到2017-11-1】

    - **事件处理**:通过`.on()`方法,我们可以轻松地绑定各种事件,如点击(`click`)、改变(`change`)等,同时支持事件委托。 - **动画效果**:jQuery的`.animate()`函数允许开发者创建复杂的动画效果,如淡入淡出、...

    jquery.address.js

    4. 事件监听:提供了一系列的事件监听器,如change、load、popstate等,开发者可以通过监听这些事件来实现相应的业务逻辑。 二、使用方法与配置 1. 引入jQuery库和jQuery.address.js插件: 确保页面已经引入了...

    jquery-3.5.1.zip

    2. **事件处理**:利用jQuery的事件绑定功能,可以实现复杂的用户交互,如表单验证、下拉菜单展开等。 3. **Ajax交互**:使用$.ajax进行异步数据请求,实现无刷新页面更新,提高用户体验。 4. **动画效果**:...

    jquery.params.js页面带参数跳转插件

    5. **事件监听**:插件可能还提供了事件监听功能,允许你在参数变化时执行相应的回调函数,如 `$.params.on('change', function() { ... })`。 6. **与jQuery的集成**:作为jQuery插件,`jquery.params.js` 可以...

    jquery.jqpagination.js分页插件.zip

    jQuery.jqpagination.js的实现原理基于JavaScript库jQuery,这是一个广泛使用的、轻量级的JavaScript框架,它简化了DOM操作、事件处理和Ajax交互等任务。借助jQuery,开发者可以轻松地将分页功能整合到网页中,而...

    jquery.js和jquery.cookie.js

    同时,jQuery还支持`hover`、`change`等许多内置事件。 5. **动画效果** jQuery的`animate()`方法是制作动画的关键,可以轻松实现平滑的过渡效果。例如,`$("#element").animate({width: "50%"}, 1000)`会在1秒内...

    jquery-3.3.1.zip

    3. **事件处理**:使用jQuery,绑定事件变得简单,如`click()`、`change()`等。同时,`event.preventDefault()`和`event.stopPropagation()`提供了更灵活的事件控制。 4. **动画效果**:jQuery 的`fadeIn()`, `...

    jquery-1.10.2.min.js

    2. 事件处理:jQuery提供了一致的事件处理方法,如`.click()`, `.change()`, `.mouseover()`等,使得处理用户交互变得简单直观。同时,它还支持事件委托,利用事件冒泡原理,可以更高效地管理大量动态生成元素的事件...

    jquery.autocomplete.js

    4. 根据需要,可以通过监听特定事件,如`select`或`change`,来处理用户的选择行为。 在实际应用中,jQuery Autocomplete可以广泛应用于搜索框、地址输入、产品推荐等多个场景。例如,在电子商务网站上,当用户在...

    jQuery.Jcrop.min.js+PHP进行图片裁剪

    3. **监听事件**:Jcrop提供了一些事件,如`change`或`select`,用于在用户改变裁剪区域时获取最新的坐标和比例。这些信息需要存储在表单中以便提交。 4. **表单提交**:当用户确认裁剪区域后,提交表单。表单数据...

    jquery-1.3.2.min js包

    3. **事件处理(Events)**:jQuery提供了一致的事件处理方式,`click()`, `hover()`, `change()`等方法让绑定和解绑事件变得简单。例如,`$(".button").click(function() {...})`可以监听所有类名为"button"的元素...

Global site tag (gtag.js) - Google Analytics