Question

enter image description here

参考上面的图片，粗体字体为<optgroup>，下面的列表在多选框内为<option>。数据由ajax从数据库中提取。

现在，我如何选择<option>，然后同时移至方框B <optgroup>，这样当我从方框B中移除<option>时，它将返回到它位于适当<optgroup>以下的正常位置吗？

脚本

$(".moveSelected1").click(function(){
         $('#show > optgroup > option:selected').remove().appendTo('#show2'); 
    });

    $(".moveSelected2").click(function(){
         $('#show2 > optgroup >option:selected').remove().appendTo('#show'); 
    });

HTML

 <select multiple size="10" id="show">

   </select>

<div class="inner_box_wrapper">
                           <div class="controls"> 
                          <!-- <a class="moveAll1">&gt;&gt;</a> -->
                               <a class="moveSelected1">Add &#8594;</a> 
                               <a class="moveSelected2">Remove &#8592;</a> 
                           <!-- <a class="moveAll2" href="#">&lt;&lt;</a>-->
                           </div>
                           </div>
<select multiple size="10" id="show2">

                         </select>

我在谷歌搜索，但我发现解决方案无处可去，他们的解释令人困惑。

PHP文件

mysqli_select_db($con,"wordblend_db");
//$sql="SELECT * FROM tbl_subjects WHERE level_id = '".$q."'";
$sql="SELECT * FROM tbl_levels,tbl_subjects WHERE tbl_levels.level_id=tbl_subjects.level_id AND tbl_levels.level_id='$q'";
$result = mysqli_query($con,$sql);

?>

<?php
while($row = mysqli_fetch_array($result)) {

    $levels=$row['level_name'];
    $levels_id=$row['level_id'];
    $subjects= $row['subject_name'];
    $subjects_id= $row['subject_id'];
   //$_SESSION['subject_by_level'][]=array('lvl_name'=>$levels,'sjt_name'=>$subjects);


 //print_r($_SESSION['subject_by_level']);
    ?>
   <optgroup label="<?php echo $levels;?>" class="<?php echo $q;?>">
       <option value="<?php echo $subjects_id;?>"><?php echo $subjects;?></option>
</optgroup>

    <?php
    }


?>

Answer 1

您可以将optgroups添加/移除到右侧的选择框中，因为它们会从左侧框中添加/删除（通过checkbox）。然后，只需来回移动options就很容易了。如果optgroup为空，则会display: none;。然后处理多个选项/选择会很容易。

$('.add').on('click', function() {
    $.each($('#show1 option:selected'), function() {
       var og = $(this).parent().attr('class');
        $(this).remove().appendTo('#show2 .' + og); 
    });
    ogVisibility();
});

删除将执行相反操作并且ogVisibility只隐藏空的optgroups：

function ogVisibility() {
    $.each($('.show > optgroup'), function() {
        if($(this).html().trim() == "")
            $(this).css('display', 'none');
        else
            $(this).css('display', 'block');
    });
}

Here's the jsfiddle.

修改
要在一个optgroup下拥有相同类别的所有选项，您需要稍微更改您的php文件：

按类别列命令您的SQL：

$sql="SELECT * ... ORDER BY level_name";

有一个变量来保留最后一个类别，并且只有当它发生变化时才生成optgroup标签。所以一会儿就像：

$last_category = ""; while($row = mysqli_fetch_array($result)) { $levels=$row['level_name']; ... ... if($last_category != $levels) { $last_category = $levels; echo '<optgroup label="' . $levels . '" class="' . $q . '">'; } echo '<option value="' . $subjects_id . '">' . $subjects . '</option>'; if($last_category != $levels) echo '</optgroup>'; }

Answer 2

您可以在所选元素$(el).parent().detach()的父级上使用jquery的detach，但您需要清除所传输项目的选定状态。

或者您也可以使用outerHTML。 $(el).parent().get(0).outerHTML

我更喜欢在创建HTML字符串时使用outerHTML，这样我就可以在一个append语句中添加它们，而不是每次迭代都调整DOM。

我已经创建了一个小demo供您查看。

如何添加和删除<选项>和</option> <optgroup>一起从框A到框B？</optgroup>

2 个答案: