[英]showing selections from drop downs in a table
i have set of drop downs with a select button below. 我在下方选择按钮设置了下拉菜单。 what i want to try to do is once the user has been through the three drop downs and pressed select, the option that is chosen is shown in a corresponding table in its assigned category
我要尝试做的是,一旦用户浏览了三个下拉菜单并按select键,所选的选项就会显示在其分配类别的对应表中
HTML: HTML:
<form method="POST">
<select name='first' id='first'>
<option selected="selected" value="nothing">choose</option>
<option value='opt_a'>opt a</option>
<option value='opt_b'>opt b</option>
</select>
<select name='sec' id='sec'>
</select>
<select name='third' id='third'>
</select>
<br />
<br />
<button id="select_btn" type="select" name="select">select</button>
<br />
<br />
<div id="result">
<table>
<tr>
<th>category</td>
<th>choice</td>
</tr>
<tr>
<td>choice 1</td>
<td></td>
</tr>
<tr>
<td>choice 2</td>
<td></td>
</tr>
<tr>
<td>choice 3</td>
<td></td>
</tr>
<tr>
<td>choice 4</td>
<td></td>
</tr>
<tr>
<td>choice 5</td>
<td></td>
</tr>
<tr>
<td>choice 6</td>
<td></td>
</tr>
<tr>
<td>choice 7</td>
<td></td>
</tr>
<tr>
<td>choice 8</td>
<td></td>
</tr>
</table>
</div>
</form>
JS: JS:
data = {
opt_a: ['choose_1','choose_2','choose_3','choose_4'],
opt_b: ['choose_5','choose_6','choose_7','choose_8'],
choose_1: ['yes','no','unsure','still unsure'],
choose_2: ['yes','no','unsure','still unsure'],
choose_3: ['yes','no','unsure','still unsure'],
choose_4: ['yes','no','unsure','still unsure'],
choose_5: ['a','b','avg','unclear'],
choose_6: ['a','b','avg','unclear'],
choose_7: ['a','b','avg','unclear'],
choose_8: ['a','b','avg','unclear']
}
$('#first').change(function(){
var firstopts = ''
$.each(data[$(this).val()],function(i,v){
firstopts += "<option value='"+v+"'>"+v+"</option>"
})
$('#sec').html(firstopts)
})
$('#sec').change(function(){
var secopts = ''
$.each(data[$(this).val()],function(i,v){
secopts += "<option value='"+v+"'>"+v+"</option>"
})
$('#third').html(secopts)
})
CSS: CSS:
select{width:150px;}
#result{width:450px; border:2px solid #234323;}
td{width:225px; text-align:center}
th{background:#656454; color:#eee; text-align:center}
Thank You in advance for any help. 预先感谢您的任何帮助。
Since your data
keys are called choose_N
and your columns have the text choice N
, you can match them by splitting the value and getting the last part: 由于您的
data
键称为choose_N
并且列的文本choice N
,因此您可以通过拆分值并获取最后一部分来进行匹配:
var number1 = 'choose_1'.split('_')[1];
var number2 = 'choice 1'.split(' ')[1];
return number1 == number2; // corresponding choice
You could also annotate your HTML with the corresponding value, if you want something more exact: 如果需要更精确的信息,也可以用相应的值注释HTML:
<tr data-choice="choose_1">
<td>choice 1</td>
<td></td>
</tr>
$(myselector).data("choice"); // Will return "choose_1"
Now all you have to do is to select the right row (the one that corresponds to the value currently selected in #sec
) and set the second column to the value currently selected in #third
. 现在,所有你需要做的是选择正确的行(对应于当前选定的值的一个
#sec
)和第二列设置为当前选择的值#third
。 You could do it on the click
callback of the select button, but a better option is to do it on $('#third').change
directly (so the user is saved from one extra button press): 您可以在选择按钮的
click
回调中执行此操作,但是更好的选择是在$('#third').change
直接进行$('#third').change
(这样,只需再按一次按钮即可保存用户):
$('#third').change(function() {
$('table tr').filter(function() { // Filters the rows, by:
var number1 = $('#sec').val().split('_')[1]; // comparing the value at #sec
var number2 = $(this).find('td:eq(0)').text().split(' ')[1]; // with the text of the first column.
return number1 == number2;
}).find('td:eq(1)').text($(this).val()); // Updates the second column.
});
Working example at jsFiddle. jsFiddle的工作示例 。 The only caveat is that, if the user wants to select the first option (the one already selected), he'll have to change it and change again for the event to trigger (in this sense, a
select
button is cleaner). 唯一需要注意的是,如果用户要选择第一个选项(已选择的一个),则必须更改它并再次更改以触发事件(在这种意义上,
select
按钮更干净)。
if you still want to do that only on button press, just replace $('#third').change(...)
with $('#select_btn').click(...)
( Edit: and $(this)
to $('#third')
). 如果您仍然只希望在按下按钮时执行此操作,只需将
$('#third').change(...)
替换$('#select_btn').click(...)
( 编辑:和$(this)
到$('#third')
)。 You might also have to use event.preventDefault
, so the form isn't submitted. 您可能还必须使用
event.preventDefault
,因此不提交表单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.