Question

我有复选框并下拉代码如下。

<input type="checkbox" name="conditions" value="Sample1">Sample 1 
<input type="checkbox" name="conditions" value="Sample2">Sample 2 <br> 
<input type="checkbox" name="conditions" value="Sample3"> Sample 3 
<input type="checkbox" name="conditions" value="Sample4"> Sample 4

<select name="Control">
  <option value="Sample1">Sample 1</option>
  <option value="Sample2">Sample 2</option>
  <option value="Sample3">Sample 3</option>
  <option value="Sample4">Sample 4</option>
</select>

目前我正在显示下拉列表中的复选框中的所有选项。我想在下拉列表中只选择desplay选中复选框。任何人都可以帮忙吗？

谢谢。

Answer 1

尝试

var $conds = $('input[name="conditions"]'),
    $ctrl = $('select[name="Control"]');
$conds.change(function () {
    if (this.checked) {
        $('<option />', {
            value: this.value,
            text: this.nextSibling.nodeValue
        }).appendTo($ctrl)
    } else {
        $ctrl.find('option[value="' + this.value + '"]').remove();
    }
})

演示：Fiddle

注意：复选框的顺序不会保留在下拉列表中

Answer 2

 $('input[type="checkbox"][name="conditions"]').change(function(){
         if($(this).is(':checked'))
          $('select[name="Control"]').append('<option value="'+$(this).val()+'">'+$(this).val()+'</option>');  
         else
          $('select[name="Control"]').find('option[value="'+$(this).val()+'"]').remove();
        });

你也可以尝试一下。

在下拉列表中显示选中的复选框

2 个答案: