Question

我有一组连续的下拉列表，根据前一个下拉列表中的选择进行填充。现在，当第三个下拉列表具有用户选择的值<option>时，该值将添加到其下方的表中。

我想要解决的问题是，如果choice 3具有用户选择的值unsure，如果用户随后选择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());
});

提前感谢您的帮助。

Answer 1

将以下代码用于最后一个选择元素

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

Answer 2

首先在显示用户选择的元素中创建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 */
   ...
}

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

jquery下拉列表选中的值

2 个答案: