Ajax动态加载<td><select>后下拉框默认选中问题

本文介绍了如何在使用Ajax动态加载表格数据后,确保<select>元素中的选项能根据数据正确设置为默认选中状态。通过jQuery选择器找到最后一个<tr>元素中的<select>,并对比选项值与数据中的值,设置选中状态。
摘要由CSDN通过智能技术生成
$.each(data.result,function(i,emp){
                    s='<tr onMouseOut="out(this)" onMouseOver=over(this)>'+
                        '<td>'+emp.employeeName+'</td>'+
                        '<td>'+emp.employTime+'</td>'+
                        '<td>'+emp.organization.organizationName+'</td>'+
                        '<td>'+emp.position+'</td>'+
                        '<td><select id="mySelect">'+
                        '<option value=3>通过</option>'+
                        '<option value=4>入职</option></select></td>'+
                        '<td>'+
                            '<di
要制作一个查询表格,你可以使用React组件来渲染表格和下拉框。首先,你需要定义一个包含数据的数组,然后将其传递给表格组件。下面是一个简单的实现: ```javascript import React, { useState } from 'react'; const data = [ { name: 'John', age: 25, gender: 'Male' }, { name: 'Jane', age: 30, gender: 'Female' }, { name: 'Bob', age: 40, gender: 'Male' }, { name: 'Alice', age: 35, gender: 'Female' }, ]; const Table = ({ data }) => { const [genderFilter, setGenderFilter] = useState('All'); const handleGenderFilter = (e) => { setGenderFilter(e.target.value); }; const filteredData = genderFilter === 'All' ? data : data.filter(item => item.gender === genderFilter); return ( <div> <label> Filter by gender: <select value={genderFilter} onChange={handleGenderFilter}> <option value="All">All</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </label> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> {filteredData.map((item, index) => ( <tr key={index}> <td>{item.name}</td> <td>{item.age}</td> <td>{item.gender}</td> </tr> ))} </tbody> </table> </div> ); }; const App = () => { return ( <div> <Table data={data} /> </div> ); }; export default App; ``` 在这个例子中,我们定义了一个数据数组,包含了每个人的姓名、年龄和性别。然后,我们定义了一个Table组件,它接收一个data属性,用于渲染表格。在组件中,我们使用useState钩子来定义了一个genderFilter状态,用于存储用户选择的性别过滤器。我们还定义了一个handleGenderFilter函数,用于更新genderFilter状态。在组件的返回值中,我们首先渲染了一个下拉框,用于选择性别过滤器。然后,我们使用map函数来遍历过滤后的数据,并渲染表格行。最后,在App组件中,我们将数据传递给Table组件。 这个例子中,我们只是简单地使用数组来模拟数据,如果你有一个实际的数据源,可以将其替换为ajax请求或其他数据获取方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值