`

Jquery取到下拉框下被选中的值

阅读更多


1、//取得下拉选单的选取值<?XML:NAMESPACE PREFIX = O />

$('#testSelect option:selected').text();
或$("#testSelect").find('option:selected').text();
或$("#testSelect").val();

/2、///设置地二个节点选中

<script type="text/javascript"> 
        $(function(){  
            $("select option:nth-child(2)").attr("selected" , "selected");  
        });  
    </script> 
//遍历option和添加、移除option
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] option").length
if(shipping.value != "CA"){
  $("select[@name=ISHIPTYPE] option").each(function(){
   if($(this).val() == 111){
    $(this).remove();
   }
  });
}else{
  $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
}
}1,下拉框:

var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
   alert($(this).val());
   });

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾
当然jquery的选择器是强大的. 还有很多方法.
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#selectTest").change(function()
{
       //alert("Hello");
       //alert($("#selectTest").attr("name"));
       //$("a").attr("href","xx.html");
       //window.location.href="xx.html";
       //alert($("#selectTest").val());
       alert($("#selectTest option[@selected]").text());
       $("#selectTest").attr("value", "2");

});
});
</script>
aaass

<!--下拉框-->
<select id="selectTest" name="selectTest">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
                $("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
                $("#chk2").attr("checked",true);//打勾
                if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
            $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
            $("#sel").empty();//清空下拉框

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
获取值:
文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();
控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

if ($ != jQuery) { $ = jQuery.noConflict(); }
0
2
分享到:
评论

相关推荐

    jquery 多选项下拉框

    在网页设计中,jQuery 多选项下拉框是一种常见的交互元素,它允许用户从多个预设选项中进行选择。这种组件通常用于节省页面空间,同时提供丰富的用户体验。本篇文章将详细探讨 jQuery 实现多选项下拉框的核心概念、...

    jquery--下拉框的实现

    在某些情况下,你可能希望改变下拉框的默认选中项。这可以通过`prop()`方法实现,将`selected`属性设置为`true`: ```javascript $('option[value="newSelection"]').prop('selected', true); ``` 除此之外,...

    jquery获取当前选中下拉框的各个属性

    **场景**: 假设有一个需求,需要从一个下拉框中选取值后添加到另一个下拉框中,可以通过以下方式实现: **HTML代码**: ```html ;height:160px;"&gt; 选项1 选项2 &lt;!-- 其他选项 --&gt; ;height:160px;"&gt; &lt;!-- ...

    jQuery支持模糊查询下拉框菜单选择代码

    本主题聚焦于"jQuery支持模糊查询下拉框菜单选择代码",这是一个常见需求,尤其是在构建交互式网页应用时。下面将详细阐述相关知识点。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”,它通过简洁的...

    jQuery基于Layui下拉框搜索提示列表代码

    **jQuery与Layui下拉框搜索提示列表详解** 在Web开发中,用户界面的交互性和易用性是至关重要的。jQuery与Layui结合,可以实现高效且美观的前端功能,例如下拉框的搜索提示列表。这个功能允许用户在输入框中输入...

    jQuery实现select下拉框菜单选中插件.zip

    总之,"jQuery实现select下拉框菜单选中插件.zip"是一个旨在提升`&lt;select&gt;`元素用户体验的工具。通过深入理解jQuery的API、CSS样式和可能的事件处理,你可以有效地利用这个插件,为你的网页项目添加专业且个性化的...

    jquery操作select下拉框的多种方法

    Jquery中对下拉框的操作 包括选中 赋值等

    jquery实现可多选下拉框

    当用户做出选择时,`val()` 方法返回所有被选中的选项的值,这些值是数组形式。我们用 `join()` 函数将它们连接成一个字符串,然后更新一个 ID 为 `displayArea` 的元素(可以是一个 `&lt;p&gt;` 或 `&lt;div&gt;`)来显示选定的...

    jquery+html自定义select下拉框,下拉框美化

    4. **悬停和选中状态**:为鼠标悬停和选中状态添加不同的样式,以增强用户反馈。 5. **动画效果**:利用jQuery的动画功能,如`fadeIn`、`fadeOut`,为下拉菜单的展开和收起添加平滑过渡。 在优化方面,我们需要注意...

    jQuery美化select下拉框

    这时,我们就需要利用JavaScript库,比如jQuery,来对select下拉框进行美化,提升用户体验。 jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在美化select下拉框...

    jquery 实现的下拉框模拟

    要实现一个 jQuery 模拟下拉框,我们需要以下步骤: 1. **HTML 结构**:创建基本的 HTML 元素,如一个隐藏的输入字段(用于存储用户选择)和一个可点击的按钮或标签,作为下拉框的触发器。 ```html 请选择 ;"&gt; ...

    jQuery多级联动下拉框插件

    jQuery多级联动下拉框插件是一种常用的前端交互组件,主要应用于网页表单设计中,以实现级联选择的效果。这种插件可以帮助用户在多个下拉框之间建立关联,当用户在一级下拉框中选择一个选项时,二级下拉框会自动更新...

    jQuery美化Select下拉框.zip

    在网页开发中,Select下拉框是常见的表单元素,但在默认状态下,其样式往往显得朴素无华,不符合现代网页设计的审美要求。为了解决这个问题,jQuery提供了一种强大的解决方案——美化Select下拉框。本篇文章将深入...

    jQuery select下拉框菜单选中插件.zip

    在这个插件中,jQuery被用来处理下拉框的选中事件,以及美化其外观。 该插件的主要功能包括: 1. **自定义样式**:插件允许开发者自定义下拉框的样式,如颜色、字体、边框等,使得与网站的整体风格保持一致,提升...

    jQuery自定义下拉框.zip

    10. **插件化开发**:为了方便复用和维护,自定义下拉框通常会被封装成一个jQuery插件。这样,其他开发者可以通过简单的调用方式在自己的项目中应用此组件。 通过以上技术,"jQuery自定义下拉框"项目实现了对原生...

    下拉框值触发另一个下拉框

    当一个下拉框的值被选中后,我们可以利用JavaScript或jQuery来监听这个事件并响应。例如,我们可以使用`addEventListener`来监听`change`事件: ```javascript document.getElementById('dropdown1')....

    jquery美化的下拉框

    5. **处理事件**:监听下拉框的事件,如选中值的改变,以便执行相应的操作。 ### 5. 示例插件 常见的jQuery美化下拉框插件有: - **Chosen**:提供了强大的搜索、多选和分组功能。 - **Select2**:具有类似Chosen...

    jquery 实现下拉框左右选择

    `filter`方法用于获取被选中的`&lt;option&gt;`元素,然后使用`appendTo`将其添加到目标下拉框。相反,当用户点击“向左移动”按钮时,会从目标下拉框中选择已选的选项并使用`remove`方法删除,再通过`appendTo`放回源...

Global site tag (gtag.js) - Google Analytics