我有一些从r1到r10的班级名称。在一行中,我有4个选择选项。这就像:
<tr class="info" id="alertr1">
<td width="30px">1</td>
<td width="200px">Likes Authority</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyL" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Enthusiastic</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyO" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Sensitive Feelings</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; "
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyG" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="180px">Likes Instructions</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; "
onmouseover="this.size=this.options.length"
onmouseout="this.size=1" onchange="this.size=1" name="qtyB" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
</tr>
我有10行喜欢这个。我想将r1到r10的所有元素收集到一个JSON字符串中,就像
一样[
r1: 4,2,3,1;
r2: 2,1,3,4;
.....
.....
r10: 2,1,4,3;
]
如何通过循环使用javascript或jquery方法获取它?因为如果用户输入了答案,我已经使用它们回到我的问题输入中。
答案 0 :(得分:1)
我猜你可能想要的对象就像
{
r1: [4,2,3,1],
r2: [2,1,3,4],
.....
.....
r10: [2,1,4,3]
}
由于您提及的对象无效,您可以使用.each()
遍历所有select
,并将其覆盖在其中的选项中
$(function(){
$('#btn').click(function() {
var res = {};
console.log($('#tab').find('tr'))
$('tr').each(function(){
var tmp = [];
var cl ;
$(this).find('select').each(function(){
cl = $(this).attr('class');
console.log(cl);
tmp.push($(this).val());
})
res[cl] = tmp
})
console.log(res);
})
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> <table id="tab"> <tr class="info" id="alertr1">
<td width="30px">1</td>
<td width="200px">Likes Authority</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
name="qtyL" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Enthusiastic</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999;"
>
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Sensitive Feelings</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; " name="qtyG" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="180px">Likes Instructions</td>
<td width="75px;">
<select class="r1" style="position: absolute; z-index:9999; "
name="qtyB" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
</tr>
<tr class="info" id="alertr1">
<td width="30px">1</td>
<td width="200px">Likes Authority</td>
<td width="75px;">
<select class="r2" style="position: absolute; z-index:9999;" name="qtyL" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Enthusiastic</td>
<td width="75px;">
<select class="r2" style="position: absolute; z-index:9999;"
name="qtyO" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="200px">Sensitive Feelings</td>
<td width="75px;">
<select class="r2" style="position: absolute; z-index:9999; " name="qtyG" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
<td width="180px">Likes Instructions</td>
<td width="75px;">
<select class="r2" style="position: absolute; z-index:9999; " name="qtyB" >
<option value="0">-</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
</td>
</tr></table>
</div>
<button id="btn">click</button>
&#13;
答案 1 :(得分:1)
不知道这是否是一种形式?您想收集用户选择的数据并将其存储到JSON对象中吗?
或者您想根据选择选项中的不同选项更改表单元素? // 您可以浏览选择字段,例如:
$.each( $('select:selected'), function() {
values[] = this.val();
}
或者像这样
$.each($("[name='r1']"), function() {
values[] = this.val();
});
现在您有一个数组,其中包含选择字段中的选定值。把它放在一个对象中:
var storedValues = {
"r1" : values
};
所以这样的事情应该有效:
$.each($("[name='r1']"), function() {
values[] = this.val();
});
storedValues.r1 = values;
等等到r10。然后你可以使用:
myValues = JSON.stringify(storedValues);
它会为您提供所有存储的数据:
{"r1":["1","5","4","3"],"r2":["2","2","1","5"]} .....etc.
我相信这会回答你的问题。我建议你丢失所有那些onclick,onmouseover等事件,并将所有功能放在一个单独的JS文件中。 如果你坚持使用JQuery,最快,最简单。
以下是关于表单的一些好消息的链接: