JQuery 获得select下option节点的文本值和value值

首先,记得引入JQuery的js文件!

alert($("#sel option:selected").text());//方法一:获取select标签选中的option中的文本。  
alert($("#sel").find("option:selected").text());//方法二:获取select标签选中的option中的文本。  
                  
alert($("#sel option:selected").val());//方法一:获取select标签选中的option中的value的值。  
alert($("#sel").find("option:selected").val());//方法二:获取select标签选中的option中的value的值。  
  //------------------------------重点--------------------------------  
                  
  //当option是这样的:<option>cc</option>。即没有value属性的时候。自然也就没有value值。  
  //这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。  
  //算了,把option中 的文本拿出来给你吧。  
  //所以当选中<option>cc</option>这个option的时候,你会发现上边四个alert出来的值是一样的。都是option中的文本。  
  //想要拿到option中的value的值,首先option得有value属性啊!!!  
下拉树是一种常见的树形选择控件,可以在下拉框中展示树形结构,用户可以通过下拉框选择树形节点。在实现下拉树时,可以使用ejs模板引擎、jQuery库、JavaScript和原生HTML Select元素。 首先,在HTML文件中创建一个下拉框,并给该下拉框设置id,如下所示: ```html <select id="tree-select"></select> ``` 接下来,使用ejs模板引擎创建下拉树节点的模板,如下所示: ```ejs <% function renderTree(data) { %> <% for (var i = 0; i < data.length; i++) { %> <option value="<%= data[i].id %>"><%= data[i].name %></option> <% if (data[i].children && data[i].children.length > 0) { %> <% renderTree(data[i].children); %> <% } %> <% } %> <% } %> ``` 该模板使用递归方式,遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 接下来,使用jQuery库来获取下拉框,并在下拉框中渲染树形结构。具体实现如下所示: ```javascript $(function() { // 模拟树形结构数据 var treeData = [ { id: 1, name: '节点1', children: [ { id: 2, name: '节点1-1', children: [ { id: 3, name: '节点1-1-1' }, { id: 4, name: '节点1-1-2' } ] }, { id: 5, name: '节点1-2' } ] }, { id: 6, name: '节点2' } ]; // 获取下拉框元素 var $select = $('#tree-select'); // 渲染树形结构到下拉框中 renderTree(treeData, $select); // 定义渲染树形结构的函数 function renderTree(data, $select) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; if (data[i].children && data[i].children.length > 0) { renderTree(data[i].children, $select); } } $select.append(html); } }); ``` 上述代码首先定义了一个模拟的树形结构数据,然后获取下拉框元素,并调用渲染树形结构的函数将树形结构渲染到下拉框中。渲染函数中使用了递归方式来遍历树形结构的每个节点,并将节点渲染成下拉框的一个选项。 最后,将上述代码保存为HTML文件并在浏览器中打开该文件,即可看到渲染出来的下拉树。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值