js如何获取点击<li>标签里的值

JavaScript07

js如何获取点击<li>标签里的值,第1张

思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:

1、HTML结构

<ul id="test">

<li>Glen</li>

<li>Tane</li>

<li>John</li>

<li>Ralph</li>

</ul>

2、javascript代码

window.onload = function(){

var obj_lis = document.getElementById("test").getElementsByTagName("li")

for(i=0i<obj_lis.lengthi++){

obj_lis[i].onclick = function(){

alert(this.innerHTML)

}

}

}

3、效果演示

js增删改查的四种方法

打开sublime text3,新建一个HTML文件,设立HTML基本架构。

创建输入和标签作为示范,并且关联js文件。let button1 = document.getElementById("button1")button1.addEventListener("click", function(){let hey = document.createElement("input") hey.type="button" hey.value="新的按钮" document.getElementsByTagName("body")[0].appendChild(hey)})我们这里进行监听事件,点击按钮以后,就会新增一个元素,这里以按钮作为示范。

let button1 = document.getElementById("button1")button1.addEventListener("click", function(){let hey = document.getElementsByTagName("form")[0] hey.removeChild(hey.childNodes[2])})如果有多行数据,那么我们也可以指定来移除掉不需要的元素。

let button1 = document.getElementById("button1")button1.addEventListener("click", function(){let hey = document.getElementsByTagName("input")[0] hey.type = "radio"})如果觉得类型错了,那么我们可以直接进行修改,指定好位置即可。

let button1 = document.getElementById("button1")button1.addEventListener("click", function(){let hey = document.getElementsByTagName("input")[0] if(hey){alert("存在元素") }})如果要查看元素是否存在,我们可以用if来判断。

“bootstrap-select.js ”联动改变方式如下:

1、多选效果

可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

输入文本动态去后台过滤

更高级的用法如:

代码示例如下:

1、多选效果

select2的多选很简单,设置一个属性就好了。

<script src="~/Scripts/jquery-1.10.2.js"></script>

<script src="~/Content/bootstrap/js/bootstrap.js"></script>

<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> 

<script src="~/Content/select2-master/dist/js/select2.js"></script>

<link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />  <select id="sel_menu2" multiple="multiple" class="form-control">

         <optgroup label="系统设置">

              <option value="1">用户管理</option>

              <option value="2">角色管理</option>

              <option value="3">部门管理</option>

              <option value="4">菜单管理</option>

         </optgroup>

         <optgroup label="订单管理">

              <option value="5">订单查询</option>

              <option value="6">订单导入</option>

              <option value="7">订单删除</option>

              <option value="8">订单撤销</option>

         </optgroup>

         <optgroup label="基础数据">

              <option value="9">基础数据维护</option>

          </optgroup>

     </select>  //多选

 $("#sel_menu2").select2({        

 tags: true,        

 maximumSelectionLength: 3  //最多能够选择的个数    })

2、图文结合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">

             <optgroup label="系统设置">

                 <option value="1">用户管理</option>

                 <option value="2">角色管理</option>

                 <option value="3">部门管理</option>

                 <option value="4">菜单管理</option>

             </optgroup>

             <optgroup label="订单管理">

                 <option value="5">订单查询</option>

                 <option value="6">订单导入</option>

                 <option value="7">订单删除</option>

                 <option value="8">订单撤销</option>

             </optgroup>

             <optgroup label="基础数据">

                 <option value="9">基础数据维护</option>

             </optgroup>

         </select> $(function () {    

 //带图片    

 $("#sel_menu").select2({        

 templateResult: formatState,        

 templateSelection: formatState    

 })

 })

 function formatState(state) {    

 if (!state.id) { return state.text }    

 var $state = $(      

 '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" class="img-flag" /> ' + state.text + '</span>'    

 )    

 return $state}

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

<select id="sel_menu3" class="js-data-example-ajax form-control">

      <option value="3620194" selected="selected">请选择</option>

 </select> $(function () {    //远程筛选

    $("#sel_menu3").select2({

        ajax: {

            url: "/Home/GetProvinces",

            dataType: 'json',

            delay: 250,

            data: function (params) {                

            return {

                    q: params.term, // search term                    page: params.page

                }

            },

            processResults: function (data, params) {

                params.page = params.page || 1                

                return {

                    results: data.items,

                    pagination: {

                        more: (params.page * 10) < data.total_count

                    }

                }

            },

            cache: true

        },

        escapeMarkup: function (markup) { return markup }, // let our custom formatter work

        minimumInputLength: 1,

        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page

        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page    })

}) function formatRepoProvince(repo) {    

if (repo.loading) return repo.text    

var markup = "<div>"+repo.name+"</div>"    

return markup

}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下:

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" }        

public JsonResult GetProvinces(string q, string page)

        {            

        var lstRes = new List<Province>()            

        for (var i = 0 i < 30 i++)            

        {                

        var oProvince = new Province()                

        oProvince.id = i                

        oProvince.name = lstProvince[i]                

        lstRes.Add(oProvince)            

        }            

        if (!string.IsNullOrEmpty(q.Trim()))            

        {                

        lstRes = lstRes.Where(x => x.name.Contains(q)).ToList()            }            

        var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10)            

        return Json(new { items = lstCurPageRes, total_count = lstRes.Count }, JsonRequestBehavior.AllowGet)        }