细谈 jQuery 的 text()、html()、val()、data()

本文入眼以取值来讲。

单选框  radio (只能三个被入选)

前天写项目遭逢了二级联合浮动,时期蒙受点难点,写个博客记录一下。

效能成分

性别       
男<input name="gender" type="radio" value="1" checked="checked" />
女<input name="gender" type="radio" value="2" />

后台Controller:

  • text(卡塔尔国 用于 div、span 意气风发类成分。
  • html(卡塔尔 用于 div、span 意气风发类成分。
  • val(卡塔尔 用于 input、select 表单成分。
  • data(卡塔尔(قطر‎ 用于别的因素,关于 data,请参见:jQuery 的 data(卡塔尔国 与 attr(卡塔尔(قطر‎使用,data(卡塔尔(قطر‎ 为什么无效?

 $(“input[name=’gender’]”卡塔尔.eq(0卡塔尔(قطر‎.click(卡塔尔国;  //数据库中可传唱
0-1-2等数字,来保障前台选中的值

@RequestMapping(“/faultType”)
@ResponseBody
public Map<String,Object> faultType(int id,HttpServletRequest
request)throws IOException
{
String ReturnMessage = “”;
//获取具有子类故障类型
List<FaultType> fauList=faultTypeService.getById(id);
if(fauList.size()>0){
request.setAttribute(“childType”, fauList);
ReturnMessage = “OK”;
}else {
ReturnMessage = “未找到消息”;
}

相见多少个因素的情形

<html>
<head>
    <script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
<div>
    <input id="rdo1" name="rdo1" type="radio" value="1" checked="checked"/>是 
    <input id="rdo1" name="rdo1" type="radio" value="0"/>否

    <button id="btn1">是</button>
    <button id="btn2">否</button>
<div>
<script type="text/javascript">
    $(function(){
        $("#btn1").click(function(){
            $("input[name='rdo1']").eq(0).attr("checked","checked");
            $("input[name='rdo1']").eq(1).removeAttr("checked");
            $("input[name='rdo1']").eq(0).click();
        });
        $("#btn2").click(function(){
            $("input[name='rdo1']").eq(0).removeAttr("checked");
            $("input[name='rdo1']").eq(1).attr("checked","checked");
            $("input[name='rdo1']").eq(1).click();
        });
    });
</script>
</body>
</html>

//*************************************************************
Map<String,Object> ReturnMAP = new
HashMap<String,Object>();
ReturnMAP.put(“childType”, fauList);
return ReturnMAP;
}

比方说风姿浪漫页有多少个 div,使用 $(“div”卡塔尔(قطر‎ 就是此处说的相逢多个要素的动静。

 

————————————————————————————————————————————————————————————

  • text(卡塔尔(قطر‎ 将全体因素的 text(State of Qatar 连接起来,然后回到连接后的值。
  • html(卡塔尔国 再次回到第贰个因素的 html(卡塔尔。(即使赋值则是对多少个要素)
  • val(State of Qatar 重回第多个要素的 val(卡塔尔(قطر‎。(纵然赋值则是对多少个成分)
  • data(卡塔尔 重临第二个成分的 data(卡塔尔。

复选框  checkbox(能够多个被入选)

前台JSP:

text() 与 html() 的区别

爱好:<br /> 
<input name="ah" type="checkbox" value="chi" />吃饭 
<input name="ah" type="checkbox" value="shui" checked="checked"/>睡觉
<input name="ah" type="checkbox" value="dadoudou" id="ddd" /><label for="ddd">打豆豆</label>

<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”col-3 control-label no-padding-right”>
故障类型: </label>
<select name=”faulttype” id=”faulttype”
onchange=”javascript:typeChange()”>
<c:forEach items=”${faultlist }” var=”faulist”>
<option value=”${faulist.faultId }”>${faulist.faultContent
}</option>
</c:forEach>
</select>

  • text(State of Qatar 会去除个中的 HTML 标签。
  • html(卡塔尔(قطر‎ 会原样再次来到内部的 HTML 标签。

<label for=”选项id”>选项名</label>  

</div>
</div>
<div class=”col-sm-3″>
<div class=”form-group”>
<label class=”col-3 control-label no-padding-right”>
故障: </label>
<input id=”childTypeCont” name=”childTypeCont”
value=”” type=”hidden” class=”col-sm-4 form-control”
placeholder=”故障”>

先用示例行检验证一下方面包车型地铁布道

–能够在单击文字时选中对应选项 

<select name=”faulttype1″ id=”faulttype1″”>
<option>–请选择–</option>
<c:forEach items=”${childType }” var=”faulist”>
<option value=”${faulist.faultId }”>${faulist.faultContent
}</option>
</c:forEach>
</select>
</select>
</div>
</div>

<div><span>1</span></div>
<div><span>2</span></div> <input
type=”hidden” class=”h1″ value=”1″ data-my=”a”> <input
type=”hidden” class=”h1″ value=”2″ data-my=”b”> <script
type=”text/javascript” src=”jquery-3.1.1.min.js”></script>
<script type=”text/javascript”> alert($(“div”).text()); // 12
alert($(“div”).html()); // <span>1</span>
alert($(“input”).val()); // 1 alert($(“input”).data(“my”)); // a
</script>

 

 

单身说说 select() 的 val()

下拉列表(select)

JS:

<select size=”3″ multiple=”multiple”> <option value=”a1″
selected=”selected”>X</option> <option
value=”a2″>Y</option> <option value=”a3″
selected=”selected”>Z</option> </select> <script
type=”text/javascript” src=”jquery-3.1.1.min.js”></script>
<script type=”text/javascript”> alert($(“select”).val()); //
[“a1”, “a3”] </script>

<select name="cars" id="sel">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

function typeChange(){
var type=$(“#faulttype”).val();

  • 如如果多选,重回的是数组,为第贰个成分各类选用途的
    value 值,若无选用,则是空项数组。
  • 假如是单选,再次来到的是字符串,当然,是经 jQuery 包装过的字符串。

<script language=”javascript”>

var html = “<option>–请选择–</option>”;
var CommitUrl = “faultType.do?id=” + type;

使用 val() 来选择 select 的项时(赋值时):

window.onload=function(){

$.ajax( {
type : “POST”,
contentType : “application/json”,
url : CommitUrl,
dataType : ‘json’,
success : function(result){
var Curedata = $.extend(true, [], result);
if (Curedata.childType != null) {
for(var i=0;i<Curedata.childType.length;i++){

  • 不管是多选如故单选:参数都足以采纳数组,也能够采纳字符串,值为要选拔的
    option 的
    value 值;对于单选,纵然参数是数组,则独有数组的第大器晚成项有用。

document.getElementById(‘sel’).value = “fiat”;
//
此间可绑定数据库传来的值 
}

html+=”<option
value='”+Curedata.childType[i].faultId+”‘>”+Curedata.childType[i].faultContent+”</option>”;
}
$(“#faulttype1”).empty();
$(html).appendTo(“#faulttype1”) ;

点火情形:

</script>

} }
});
}

  • 单选 select 的 size > 1,又从未为 option 钦赐 selected,则
    val(卡塔尔 再次来到 null。
  • 单选 select,利用 JS 将其 selectedIndex 设为 -1,则 val() 返回
    null。
  • 单选 select,没有 option,则 value() 返回 null。

 

——————————————————————————————————————————————————————————————————————————

请继续阅读关于 SELECT 的 multiple 和 selectedIndex
值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Select Test</title>
</head>
<script language="javascript">
function $(o)
{
    return document.getElementById(o);
}
</script>
<body>
<p>
  <select name="Region" id="Region">
    <option value="790">全部</option>
    <option value="791">济南</option>
    <option value="792">青岛</option>
  </select>
</p>
<p>
  <input type="button" name="Submit1" value="this.selectedIndex" onclick="alert($('Region').selectedIndex);" /> 获取索引值
  <input type="button" name="Submit2" value="this.value" onclick="alert($('Region').value);" />  获取value值
  <input type="button" name="Submit3" value="this.option[i].value" onclick="alert($('Region').options[$('Region').selectedIndex].value);" /> 获取value值
  <input type="button" name="Submit4" value="this.option[i].text" onclick="alert($('Region').options[$('Region').selectedIndex].text);" /> 获取选中内容
</p>
</body>
</html>

以下是引用外人写的(最早的小说地址:

<input type=”checkbox” 的 val()

 

——————————————————————————————————————————————————————————————————————————

归来的并非 true、false,而是其 value 值。

 

纪念力不佳的能够贮藏下:  

  • 对 select 是回到选中项的 value 值。
  • 对 checkbox 是回来其 value 值(无论在那之中否选中)。

 

1,下拉框:  

进而说 jQuery 对 checkbox 跟对待 hidden 是千篇黄金年代律的。

收获少年老成组radio被入选项的值 
var item = $(‘input[@name=items][@checked]’).val(); 
获得select被入选项的文本 
var item = $(“select[@name=items] option[@selected]”).text(); 
select下拉框的第一个成分为日前当选值 
$(‘#select_id’)[0].selectedIndex = 1; 
radio单选组的第1个成分为近年来入选值 
$(‘input[@name=items]’).get(1).checked = true; 

var cc1   = $(“.formcselect[@name=’country’] option[@selected]”卡塔尔.text(State of Qatar;//得到下拉菜单的选中项的文件(注意中间有空格卡塔尔(قطر‎  

获取值: 

var cc2 = $(‘.formcselect[@name=”country”]’State of Qatar.val(State of Qatar;  //获得下拉菜单的选中项的值  

文本框,文本区域:$(“#txt”).attr(“value”); 
多选框checkbox:$(“#checkbox_id”).attr(“value”); 
单选组radio: $(“input[@type=radio][@checked]”).val(); 
下拉框select: $(‘#sel’).val(); 

var cc3 = $(‘.formc select[@name=”country”]’State of Qatar.attr(“id”卡塔尔国;//获得下拉菜单的选中项的ID属性值  

调节表单元素: 
文本框,文本区域:$(“#txt”卡塔尔国.attr(“value”,”卡塔尔(قطر‎;//清空内容 
$(“#txt”卡塔尔.attr(“value”,’11’State of Qatar;//填充内容 

$(“#select”State of Qatar.empty(卡塔尔(قطر‎;//清空下拉框//$(“#select”).html(”);  

多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾 
$(“#chk2”).attr(“checked”,true);//打勾 
if($(“#chk1″State of Qatar.attr(‘checked’卡塔尔(قطر‎==undefined卡塔尔 //判断是还是不是业已打勾 

$(“<optionvalueoptionvalue=’1′>1111</option>”).appendTo(“#select”卡塔尔(قطر‎//增多下拉框的option  

单选组radio:
$(“input[@type=radio]”State of Qatar.attr(“checked”,’2’State of Qatar;//设置value=2的等级次序为方今入选项 
下拉框select:
$(“#sel”卡塔尔(قطر‎.attr(“value”,’-sel3’卡塔尔(قطر‎;//设置value=-sel3的类型为近年来当选项  $(“#sel”).val(“value”);
$(“<option value=’1′>1111</option><option
value=’2′>2222</option>”).appendTo(“#sel”State of Qatar//加多下拉框的option 
$(“#sel”卡塔尔国.empty(卡塔尔;//清空下拉框 

些微解释一下:  

 

1.select[@name=’country’] option[@selected] 表示全数name 属性,  

jquery获取select选用的文件与值
获取select :
获取select 选中的 text :
    $(“#ddlregtype”).find(“option:selected”).text();

同时该属性值为’country’ 的select成分 里面包车型大巴具备selected 属性的option 元素;  

获取select选中的 value:
    $(“#ddlregtype “).val();

能够看来有@开首的就代表前面跟的是性质。  

赢得select选中的目录:
    $(“#ddlregtype
“).get(0).selectedindex;

2,单选框:  

设置select:
设置select 选中的索引:
    $(“#ddlregtype
“卡塔尔(قطر‎.get(0卡塔尔国.selectedindex=index;//index为索引值

$(“input[@type=radio][@checked]”卡塔尔.val(卡塔尔(قطر‎;  //获得单选框的选中项的值(注意中间未有空格卡塔尔国  

设置select 选中的value:
    $(“#ddlregtype
“).attr(“value”,”normal“);
    $(“#ddlregtype
“).val(“normal”);
    $(“#ddlregtype “).get(0).value
= value;

$(“input[@type=radio][@value=2]”State of Qatar.attr(“checked”,’checked’State of Qatar;//设置单选框value=2的为选中状态.(注意中间未有空格卡塔尔  

设置select 选中的text:

3,复选框:  

    var count=$(“#ddlregtype
option”).length;
      for(var i=0;i<count;i++)
         {           if($(“#ddlregtype
“).get(0).options[i].text == text)
            {
                $(“#ddlregtype
“).get(0).options[i].selected = true;
                break;
            }
        }
    $(“#select_id
option[text=’jquery’]”).attr(“selected”, true);

$(“input[@type=checkbox][@checked]”State of Qatar.val(卡塔尔; //拿到复选框的入选的第黄金年代项的值  

设置select option项:

$(“input[@type=checkbox][@checked]”卡塔尔(قطر‎.each(function(State of Qatar{//由于复选框日常相中的是三个,所以能够循环输出  

    $(“#select_id”卡塔尔(قطر‎.append(“<option
value=’value’>text</option>”卡塔尔(قطر‎;  //加多生机勃勃项option
    $(“#select_id”卡塔尔国.prepend(“<option
value=’0′>请采纳</option>”State of Qatar; //在前方插入生机勃勃项option
    $(“#select_id
option:last”State of Qatar.remove(State of Qatar; //删除索引值最大的option
    $(“#select_id
option[index=’0′]”State of Qatar.remove(卡塔尔国;//删除索引值为0的option
    $(“#select_id
option[value=’3′]”卡塔尔国.remove(卡塔尔; //删除值为3的option
    $(“#select_id
option[text=’4′]”).remove(); //删除text值为4的option

  alert($(this).val());  

清空 select:

   });  

    $(“#ddlregtype “).empty();

$(“#chk1”).attr(“checked”,”);//不打勾  

行事要求,要赢得八个表单中的值。如图:

$(“#chk2”).attr(“checked”,true);//打勾  

什么样获得从左侧接纳框增添到左侧采取框中的值?作者想了想用网页特效能够拿到,这里用了相比流行的jquery。
js代码如下:

if($(“#chk1″卡塔尔国.attr(‘checked’State of Qatar==undefined卡塔尔国{} //判别是不是已经打勾  

    //获取具备属性值 var item =
$(“#select1”).val();
    $(function(){
      $(‘#select1’卡塔尔.each(  //获得select1的全体值
         function(){
            $(‘button’).click(function(){
                alert($(‘#select2’).val());  //获得select2中的select1值
            });
         });
    })
    </script>

当然jquery的选择器是无往不克的. 还会有好多方法.  

值得注意的是,不可能一直写成

<script src=”jquery-1.2.1.js”type=”text/javascript”></script>
 

    $(function(){
      $(‘#select2’卡塔尔国.each(  //获得select1的持有值,因为前边讲选项从侧面增添到左边手,jquery其实并未当真将值从左边传到左边。
         function(){
            $(‘button’).click(function(){
                alert($(this).val());  //获得select2中的select1值
            });
         });
    })

<script language=”javascript”type=”text/javascript”>
 

html:
    <div class=”centent”>
            <select
multiple=”multiple” id=”select1″ name=”dd” >
                <option
value=”1″>选项1</option>
                <option
value=”2″>选项2</option>
                <option
value=”3″>选项3</option>
                <option
value=”4″>选项4</option>
                <option
value=”5″>选项5</option>
                <option
value=”6″>选项6</option>
                <option
value=”7″>选项7</option>
            </select>
            <div>
                <span id=”add”
>选中增多到右边手>></span>
                <span
id=”add_all” >全体增加到左臂>></span>
            </div>
        </div>
        <div
class=”centent”>
            <select
multiple=”multiple” id=”select2″ name=”sel” >
            </select>
            <div>
                <span
id=”remove”><<选中删除到左臂</span>
                <span
id=”remove_all”><<全体去除到侧面</span>
            </div>
        </div>

$(document).ready(function(){  

接收JQuery,Ajax调用动态填充Select的option选项

$(“#selectTest”).change(function()  

    //绑定ClassLevel1单击事件
        $(“#ClassLevel1”).change(function () {
            var id = $(“#ClassLevel1”).val();
            var level2 = $(“#ClassLevel2”);
            level2.empty();
            $(“#ClassLevel3”).hide();
            $.ajax({
                url:
“./askCommon.ashx?action=getclasslevel&pid=” + id,
                data: { “type”: “ajax” },
                datatype: “json”,
                type: “get”,
                success: function (data) {
                    var json = eval_r(data);
                    for (var ind in json) {
                        level2.append($(“<option value='” +
json[ind].id + “‘>” + json[ind].typename + “</option>”));
                    }
    
                }
            });
        })

{  

      //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>

 <ahrefahref=”#”>aaass</a>

 <!–下拉框–>  

  1. <select id=”selectTest”name=”selectTest”>  
  2. <optionvalueoptionvalue=”1″>11</option>  
  3. <optionvalueoptionvalue=”2″>22</option>  
  4. <optionvalueoptionvalue=”3″>33</option>  
  5. <optionvalueoptionvalue=”4″>44</option>  
  6. <optionvalueoptionvalue=”5″>55</option>  
  7. <optionvalueoptionvalue=”6″>66</option>  
  8. </select>  
  9. jqueryradio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其有关获取生机勃勃组radio被选中项的值  
  10. var item = $(‘input[@name=items][@checked]’).val();  
  11. 拿到select被入选项的文本  
  12. var item = $(“select[@name=items] option[@selected]”).text();  
  13. select下拉框的第2个成分为眼下选中值  
  14. $(‘#select_id’)[0].selectedIndex = 1;  
  15. radio单选组的第三个元素为最近选中值  
  16. $(‘input[@name=items]’).get(1).checked = true;  
  17. 获取值:  
  18. 文本框,文本区域:$(“#txt”).attr(“value”);  
  19. 多选框checkbox:$(“#checkbox_id”).attr(“value”);  
  20. 单选组radio: $(“input[@type=radio][@checked]”).val();  
  21. 下拉框select: $(‘#sel’).val();  
  22. 调节表单成分:  
  23. 文本框,文本区域:$(“#txt”卡塔尔(قطر‎.attr(“value”,”卡塔尔国;//清空内容  
  24.                $(“#txt”State of Qatar.attr(“value”,’11’卡塔尔(قطر‎;//填充内容  
  25. 多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾  
  26.                $(“#chk2”).attr(“checked”,true);//打勾  
  27.                if($(“#chk1″卡塔尔(قطر‎.attr(‘checked’State of Qatar==undefined卡塔尔(قطر‎ //剖断是或不是早就打勾  
  28. 单选组radio:$(“input[@type=radio]”卡塔尔.attr(“checked”,’2’卡塔尔国;//设置value=2的品种为当下相中项  
  29. 下拉框select:$(“#sel”卡塔尔国.attr(“value”,’-sel3’卡塔尔(قطر‎;//设置value=-sel3的种类为近期入选项  
  30.            $(“<optionvalueoptionvalue=’1′>1111</option><optionvalueoptionvalue=’2′>2222</option>”).appendTo(“#sel”卡塔尔(قطر‎//增多下拉框的option  
  31.            $(“#sel”State of Qatar.empty(State of Qatar;//清空下拉框  
  32. 赢得豆蔻年华组radio被选中项的值  
  33. var item = $(‘input[@name=items][@checked]’).val();  
  34. 收获select被入选项的文本  
  35. var item = $(“select[@name=items] option[@selected]”).text();  
  36. select下拉框的第2个成分为近些日子选中值  
  37. $(‘#select_id’)[0].selectedIndex = 1;  
  38. radio单选组的第1个成分为前段时间选中值  
  39. $(‘input[@name=items]’).get(1).checked = true;  
  40. 获取值:  
  41. 文本框,文本区域:$(“#txt”).attr(“value”);  
  42. 多选框checkbox:$(“#checkbox_id”).attr(“value”);  
  43. 单选组radio: $(“input[@type=radio][@checked]”).val();  
  44. 下拉框select: $(‘#sel’).val();  
  45. 调节表单成分:  
  46. 文本框,文本区域:$(“#txt”卡塔尔(قطر‎.attr(“value”,”卡塔尔(قطر‎;//清空内容  
  47. $(“#txt”卡塔尔.attr(“value”,’11’卡塔尔;//填充内容  
  48. 多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾  
  49. $(“#chk2”).attr(“checked”,true);//打勾  
  50. if($(“#chk1″卡塔尔.attr(‘checked’卡塔尔(قطر‎==undefinedState of Qatar //推断是或不是早就打勾  
  51. 单选组radio:$(“input[@type=radio]”卡塔尔(قطر‎.attr(“checked”,’2’State of Qatar;//设置value=2的类别为当下相中项  
  52. 下拉框select:$(“#sel”卡塔尔(قطر‎.attr(“value”,’-sel3’卡塔尔国;//设置value=-sel3的项目为当下入选项  
  53. $(“<optionvalueoptionvalue=’1′>1111</option><optionvalueoptionvalue=’2′>2222</option>”).appendTo(“#sel”State of Qatar//增加下拉框的option  
  54. $(“#sel”卡塔尔.empty(卡塔尔国;//清空下拉框  

发表评论

电子邮件地址不会被公开。 必填项已用*标注