1

我有一组顺序下拉列表，这些下拉列表根据前一个下拉列表中的选择进行填充。现在，一旦第三个下拉列表具有<option>用户选择的值，该值就会添加到它下面的表格中。

我要解决的是，如果用户选择了choice 3该值，我该如何做到unsure这一点，在此之后，如果用户然后选择 for choice 1，unsure也unsure将被删除choice 3？因此，最新的选择将覆盖任何其他choice具有相同值的输入到表中。表格中不能输入任何两个相同的值。

HTML：

<form method="POST">
  <select  name='first' id='first'>
    <option selected="selected" value="nothing">choose</option>   
    <option value='opt_a'>opt a</option>
  </select>
  <select name='sec' id='sec'>
  </select>
  <select name='third' id='third'>
  </select>
   <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>
  </table>
 </div>
</form>

JS：

data = {
opt_a: ['choose_1','choose_2','choose_3','choose_4'],
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']
}

$('#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)
})

$('#third').change(function() {
  $('table tr').filter(function() {
    var number1 = $('#sec').val().split('_')[1];
    var number2 = $(this).find('td:eq(0)').text().split(' ')[1];
    return number1 == number2;
  }).find('td:eq(1)').text($(this).val());
});

提前感谢您的帮助。

4

2 回答 2

2

使用下面的代码作为最后一个选择元素

  $('#third').change(function() {
    $('table tr').each(function(index){
       var tdVal=$.trim($(this).find('td:eq(1)').html());
       if(tdVal==$('#third').val())
        $(this).find('td:eq(1)').html('');
    });
      $('table tr').filter(function() {
        var number1 = $('#sec').val().split('_')[1];
        var number2 = $(this).find('td:eq(0)').text().split(' ')[1];
        return number1 == number2;
      }).find('td:eq(1)').text($(this).val());
    });

从这里试试http://jsfiddle.net/qQaRC/1/

于 2013-05-17T10:18:24.263 回答
1

首先在显示用户选择的元素中创建 div，并为 div 提供一个 id。

然后尝试创建一个数组：

mychoices = new Array();

每次用户对选择框进行更改时，您都必须检查该选择是否已经在数组中。如果在数组中仍未找到该选项，则创建一对键值。如果它已经存在，则覆盖它。

if(!(choice in mychoices)){
   mychoices[choice] = <div id from the table>;
   /* write the value into the div of the table */
   ...
}
else{
   /* get the id of the div where the choice is in */
   id_value = mychoices[choice];
   /* write the value into the div of the table. use the id you have in variable 
      id_value */
   ...
}

变量选择包含您要检查的值（是，否，不确定，...）。您必须确定用户单击的选项。

于 2013-05-17T09:50:14.183 回答