jQuery获取各种标签的文本和value值

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

目录

• jQuery获取各种标签的文本和value值
  • 1、select
  • 2、radio
  • 3、span

 

正文

回到顶部

jQuery获取各种标签的文本和value值

1、select

<select id="test">
   <option value ="volvo">Volvo</option>
   <option value ="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select>
 
获取select 选中的 text :
     $\text{("\#test").find("option:selected").text(); 获取select选中的 value: }$("#test").val();
 
获取select选中的索引:
     $\text{("\#test").get(0).selectedindex; 设置select: 设置select 选中的索引： }$("#test").get(0).selectedindex=index;//index为索引值
 
设置select 选中的value：
     $\text{("\#test").attr("value","normal“); }$("#test").val("normal");
     $\text{("\#test").get(0).value = value; 设置select option项: }$("#test").append("<option value='value'>text</option>");  //添加一项option
     $\text{("\#test").prepend("<option value='0'>请选择</option>"); //在前面插入一项option }$("#test option:last").remove(); //删除索引值最大的option
     $\text{("\#test option[index='0']").remove();//删除索引值为0的option }$("#test option[value='3']").remove(); //删除值为3的option
     $\text{("\#test option[text='4']").remove(); //删除text值为4的option 清空 select: }$("test").empty();

2、radio

<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="green">绿色
 
1.获取选中值，三种方法都可以：
 
${(}^{\prime }input:radio:checke{d}^{\prime }).val()；$("input[type='radio']:checked").val();
 
$("input[name{=}^{\prime }color{s}^{\prime }]:checked").val();2.\mathrm{设}\mathrm{置}\mathrm{第}\mathrm{一}\mathrm{个}Radio\mathrm{为}\mathrm{选}\mathrm{中}\mathrm{值}：$('input:radio:first').attr('checked', 'checked');
 
或者
 
${(}^{\prime }input:radio:firs{t}^{\prime }).attr{(}^{\prime }checke{d}^{\prime }{,}^{\prime }tru{e}^{\prime });\mathrm{注}：attr("checked"{,}^{\prime }checke{d}^{\prime })=attr("checked"{,}^{\prime }tru{e}^{\prime })=attr("checked",true)3.\mathrm{设}\mathrm{置}\mathrm{最}\mathrm{后}\mathrm{一}\mathrm{个}Radio\mathrm{为}\mathrm{选}\mathrm{中}\mathrm{值}：$('input:radio:last').attr('checked', 'checked');
 
或者
 
${(}^{\prime }input:radio:las{t}^{\prime }).attr{(}^{\prime }checke{d}^{\prime }{,}^{\prime }tru{e}^{\prime });4.\mathrm{根}\mathrm{据}\mathrm{索}\mathrm{引}\mathrm{值}\mathrm{设}\mathrm{置}\mathrm{任}\mathrm{意}\mathrm{一}\mathrm{个}radio\mathrm{为}\mathrm{选}\mathrm{中}\mathrm{值}：$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
 
或者
 
${(}^{\prime }input:radi{o}^{\prime }).slice(1,2).attr{(}^{\prime }checke{d}^{\prime }{,}^{\prime }tru{e}^{\prime });5.\mathrm{删}\mathrm{除}\mathrm{第}\mathrm{几}\mathrm{个}Radio$("input:radio").eq(索引值).remove();索引值=0,1,2....
 
如删除第3个Radio:$("input:radio").eq(2).remove();6.\mathrm{遍}\mathrm{历}Radio$('input:radio').each(function(index,domEle){
 
      //写入代码
 
});

3、span

span是块状元素，span不存在Value值，<span> 测试内容</span>
要是想取span的内容，$("span").text();

jquery给span赋值

span是最简单的容器，可以当作一个形式标签，其取值赋值方法有别于一般的页面元素。

//赋值

$("#spanid").html(value)

//取值

$("#spanid").text()

在js中

假设我有一个<span id="text"></span>

现在我要单击一个按钮后让span中显示“Hello,World!”。

<input  id="showBtn" type="button"  value="显示" onclick="click()"/>

<script type="text/javascript">

function click(){

document.getElementById("text").innerText="Hello,World!";

}

</script>