请大家帮我看一下这是什么问题
为啥城市那一栏把索引号显示出来了（效果图在下面）
<body>
<h2>学生就业统计表</h2>
<form class="input">
<input type="text" class="name" placeholder="姓名">
<input type="text" class="age" placeholder="年龄">
<input type="text" class="salary" placeholder="薪资">
<select name="gender" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="place" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
<option value="5">西安</option>
<option value="6">广州</option>
<option value="7">长沙</option>
</select>
<button class="add">+添加</button>
</form>
<div class="total">
<h4>共有数据0条</h4>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
<script>
const add =document.querySelector('.add')
const input =document.querySelector('.input')
const name =document.querySelector('.name')
const age =document.querySelector('.age')
const sex =document.querySelector('#sex')
const salary =document.querySelector('.salary')
const city =document.querySelector('#city')
const total = document.querySelector('.total h4')
const tbody = document.querySelector('table tbody')
const initData = [
{
id: 1,
name: '丽丽',
age: 20,
sex: '女',
salary: '12000',
city: '深圳',
time: '2023/7/26 14:06:28'
}
]
localStorage.setItem('data', JSON.stringify(initData))
const arr = JSON.parse(localStorage.getItem('data')) || []
// console.log(arr)
function render() {
const nArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.id}</td>
<td>${ele.name}</td>
<td>${ele.age}</td>
<td>${ele.sex}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id='${index}'>
删除
</a>
</td>
</tr>
`
})
// console.log(nArr)
tbody.innerHTML =nArr.join('')
total.innerHTML =`共有数据 ${arr.length} 条`
}
render()
input.addEventListener('submit',function(e){
e.preventDefault()
if(!name.value || !age.value ||!salary.value){
return alert('输入的内容不能为空！')
}
arr.push({
id: arr.length + 1,
name: name.value,
age: age.value,
sex: sex.value,
salary: salary.value,
city: city.value,
time: new Date().toLocaleString()
})
//渲染
render()
this.reset()
localStorage.setItem('data',JSON.stringify(arr))
})
//删除业务
tbody.addEventListener('click',function(e){
if(e.target.tagName=== 'A'){
// console.log(e.target.dataset.id)
arr.splice(e.target.dataset.id, 1)
alert('删除成功！')
}
render()
localStorage.setItem('data',JSON.stringify(arr))
})
</script>
</body>
因为你在新增数据时，city: city.value，写的是city.value，获取的是代码中value的数字
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
<option value="5">西安</option>
<option value="6">广州</option>
<option value="7">长沙</option>
城市那一栏显示的是索引号是因为在HTML代码中，select标签中的option标签没有设置value属性，导致默认取得的值是选项的索引号。要修复这个问题，可以给每个option标签添加value属性，并设置为对应的城市值。例如：
html
<select name="place" id="city">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="西安">西安</option>
<option value="广州">广州</option>
<option value="长沙">长沙</option>
</select>
这样修改后，城市那一栏就会显示选中的城市名称，而不是索引号了。
不知道你这个问题是否已经解决, 如果还没有解决的话:- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7519822
- 这篇博客也不错, 你可以看下在循环中进行赋值，每次出来的都是最后一遍循环的数据
- 您还可以看一下 孙玖祥老师的图解数据结构与算法课程中的 汉诺塔问题代码实现小节, 巩固相关知识点
- 除此之外, 这篇博客: 微前端解决方案初探 03 模块联邦（概述、案例介绍、应用初始化）中的 定义模板文件 部分也许能够解决你的问题。
- 以下回答由chatgpt基于相关博客总结生成:
我需要具体的问题才能给出解决方案。请提供具体的问题，我会尽力帮助您解决。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^