如何添加和删除<选项>与< optgroup>一起选择从方框A到方框B？ [英] How to add and remove <option> selected together with <optgroup> from box A to box B?

问题描述

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

Referring to the above image, the bold fonts are <optgroup> and the list below each is <option> inside a multiple select box.The data are fetched from database by ajax.

现在，如何选择< option> 但是然后移动到方框B < optgroup> ，这样当我删除< option> 从方框B开始，它会回到适当的< optgroup> 以下的正常位置吗？

Now, how do I select the <option> but then move to box B the <optgroup> as well, so that when I remove the <option> from box B, it will go back to it's normal position below appropriate <optgroup> please?

脚本

$(".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>

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

I searched in google, but I found the solution nowhere and their explanation is confusing.

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
    }


?>

推荐答案

您可以添加/删除 optgroups 到右边的选择框，因为它们是从左框中添加/删除的（通过复选框）。然后来回移动选项很容易。如果 optgroup 为空，则它将具有 display：none; 。然后处理多个选项/选择会很容易。

You can add/remove the optgroups to the right select box as they're added to/removed from the left box (through checkbox). Then it'd be easy to just move the options back and forth. If an optgroup is empty it'll have display: none;. It'll be easy then to handle multiple option/selection.

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

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

Remove will do the reverse and ogVisibility just hides the empty optgroups:

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

这是jsfiddle。

编辑：

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

To have all the options with same category under one optgroup you need to change your php file a little bit:

按类别列排序您的SQL：

Order your SQL by the category column:

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

有一个变量来保留最后一个类别，并且只有当它发生变化时才生成optgroup标签。所以，时间将如下：

Have a variable to keep the last category and only when it changes generate optgroup tags. So the while will be like:

$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>';
}

这篇关于如何添加和删除<选项>与< optgroup>一起选择从方框A到方框B？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！