0

我有一组下拉菜单，下面有一个选择按钮。我想要尝试做的是，一旦用户通过三个下拉菜单并按下选择，选择的选项将显示在其指定类别的相应表中

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}

预先感谢您的任何帮助。

4

1 回答 1

1

由于您的data键被调用choose_N并且您的列具有 text 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(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(...)( Edit:和$(this)to $('#third'))。您可能还必须使用event.preventDefault，因此不会提交表单。

于 2013-03-10T05:54:33.787 回答