[英]showing selections from drop downs in a table
我在下方選擇按鈕設置了下拉菜單。 我要嘗試做的是,一旦用戶瀏覽了三個下拉菜單並按select鍵,所選的選項就會顯示在其分配類別的對應表中
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:
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:
select{width:150px;}
#result{width:450px; border:2px solid #234323;}
td{width:225px; text-align:center}
th{background:#656454; color:#eee; text-align:center}
預先感謝您的任何幫助。
由於您的data
鍵稱為choose_N
並且列的文本choice N
,因此您可以通過拆分值並獲取最后一部分來進行匹配:
var number1 = 'choose_1'.split('_')[1];
var number2 = 'choice 1'.split(' ')[1];
return number1 == number2; // corresponding choice
如果需要更精確的信息,也可以用相應的值注釋HTML:
<tr data-choice="choose_1">
<td>choice 1</td>
<td></td>
</tr>
$(myselector).data("choice"); // Will return "choose_1"
現在,所有你需要做的是選擇正確的行(對應於當前選定的值的一個#sec
)和第二列設置為當前選擇的值#third
。 您可以在選擇按鈕的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.
});
jsFiddle的工作示例 。 唯一需要注意的是,如果用戶要選擇第一個選項(已選擇的一個),則必須更改它並再次更改以觸發事件(在這種意義上, select
按鈕更干凈)。
如果您仍然只希望在按下按鈕時執行此操作,只需將$('#third').change(...)
替換$('#select_btn').click(...)
( 編輯:和$(this)
到$('#third')
)。 您可能還必須使用event.preventDefault
,因此不提交表單。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.