Question

我希望下面的图片能够让您了解我想要做的事情。 enter image description here

所以我从复选框中选择类别。每个类别的列表将附加在方框A中。从数据库中检索的数据。接下来，我可以选择任何一个项目并移动到方框B.它将与类别一起移动。

现在，如何在框B中获取这些类别的类别和值，以便我可以发送到服务器以存储在数据库中？

脚本

function sendtobox(param)
            {
              xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              if (this.responseText !== null) {
                var ajaxElm = document.getElementById('boxA');
                ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
                moveToBoxB(); 
               }

             }
            }

                 xmlhttp.open("GET","getsubjects.php?q="+param,true);
                 xmlhttp.send();

            }
    /*to add and remove item starts*/    
function moveToBoxB() { 
//$('#boxB').empty(); 
$.each($('#boxA > optgroup'), function() { 
var cl = $(this).attr('class'); 
if($('#boxB').children('optgroup.' + cl).length == 0) 
$(this).clone().empty().appendTo('#boxB'); 
}); 
ogVisibility(); 
/*get the value of box b items by category starts*/
//$("#boxB").children('optgroup').css({"color": "red", "border": "2px solid red"});
/*get the value of box b items by category ends*/

}

$(document).ready(function() {
$('.add').on('click', function(e) { 
e.preventDefault(); 
$.each($('#boxA option:selected'), function() { 
var og = $(this).parent().attr('class'); 
$(this).remove().appendTo('#boxB .' + og); 
}); 
ogVisibility(); 
});

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

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

}

HTML

<ul class="small-block-grid-3 medium-block-grid-3 large-block-grid-2">
                  <li><input type="checkbox" name="level[0]" id="level" class="level" value="1"><label>Primary</label></li>
                  <li><input type="checkbox" name="level[1]" id="level" class="level" value="2"><label>Upper Secondary</label></li>
                  <li><input type="checkbox" name="level[2]" id="level" class="level" value="3"><label>University</label></li>
                  <li><input type="checkbox" name="level[3]" id="level" class="level" value="4"><label>Lower Secondary</label></li>
                  <li><input type="checkbox" name="level[4]" id="level" class="level" value="5"><label>Pre University</label></li>
                  <li><input type="checkbox" name="level[5]" id="level" class="level" value="6"><label>Skills/Languages</label></li>                 
              </ul>

添加了提交按钮以触发功能

<section>
       <div class="row">
          <div class="small-12 medium-12 large-12 columns text-center">
              <button id="submit" onclick="sendtoserver();">Submit</button>
          </div>
      </div>

      </section>

但不确定要为此脚本写什么

function sendtoserver()
        {
            alert($('#boxB option').prop('value'));
        }

Answer 1

你可以用这种方式得到opgroup

$('select').change(function() {
var selected = $(':selected', this);
alert(selected.parent().attr('label'));
alert(selected.closest('optgroup').attr('label'));
});

http://jsfiddle.net/jkeyes/zjLCp/2/

并且对于选项，您可以执行此操作 $（＆＃39;选择＃my_multiselect＆＃39;）。VAL（）这将返回所选选项的值数组 - 您不需要循环并自己获取它们。

Answer 2

你可以：

选择所有组合框（MS Access Multi-select Combo Box Select All/None）
将结果选择发布到服务器

如何在多选框中获取<optgroup>和<option>的值以通过ajax发送到服务器？</option> </optgroup>

2 个答案: