双重选择框不能正确POSTing

Question

我还在尝试学习jquery，所以请耐心等待。我有一个双重选择框，它只有在我将第二个选择框的结果移动到那里后才能选择它们。我想要的是，当第一个框将值转移到第二个选择框时，它不需要突出显示选项，而是在表单提交上发布第二个选择框。这就是我所拥有的：

HTML：

<span id="dualselect1" class="dualselect">

    <select name="select1[]" multiple="multiple" size="10">
    <?php
    $c='0';
    foreach($lp_name as $lpn){
        echo '<option value="'.$lp_id[$c].'">'.$lpn.' ('.$lp_url[$c].')</option>';
        $c++;
    }
    ?>
    </select>

    <span class="ds_arrow">
        <span class="arrow ds_prev">&laquo;</span>
        <span class="arrow ds_next">&raquo;</span>
    </span>
    <select name="select2[]" multiple="multiple" size="10">
        <option value=""></option>
    </select>
</span> 

JQUERY：

<script type="text/javascript">
jQuery(document).ready(function(){    
var db = jQuery('#dualselect1').find('.ds_arrow .arrow');   //get arrows of dual select
    var sel1 = jQuery('#dualselect1 select:first-child');       //get first select element
    var sel2 = jQuery('#dualselect1 select:last-child');            //get second select element

    sel2.empty(); //empty it first from dom.

    db.click(function(){
        var t = (jQuery(this).hasClass('ds_prev'))? 0 : 1;  // 0 if arrow prev otherwise arrow next
        if(t) {
            sel1.find('option').each(function(){
                if(jQuery(this).is(':selected')) {
                    jQuery(this).attr('selected',false);
                    var op = sel2.find('option:first-child');
                    sel2.append(jQuery(this));
                }
            }); 
        } else {
            sel2.find('option').each(function(){
                if(jQuery(this).is(':selected')) {
                    jQuery(this).attr('selected',false);
                    sel1.append(jQuery(this));
                }
            });     
        }
    });
 });

PHP：

if(isset($_POST['submit'])) {
  var_dump($_POST['select2']);
}

就像我说的，我有这样的工作。但是，如果我发送一个值到select2，我必须在提交之前突出显示它，否则它不会发布。有什么想法吗？

Answer 1

我以前遇到过这种情况，您有几个选择。使用JS可以将第二个框中的所有值推入隐藏字段，也可以使用JS选择第二个框中的所有值作为表单上的onsubmit处理程序。

实际上，我以前做过后者，它工作得很好。

最终，选择框(多选或单选)只发送选定的值--这就是为什么它只有在您首先选择它们时才起作用。它的工作原理很像复选框，其中未选中的值不会被发布。

这应该会“选择”所有它们：

$('#myform').submit(function() {
  var sel2 = $('#dualselect1 select:last-child');
  sel2.find('option').each(function(){
    $(this).attr('selected',true);
  });   
});

或者这会将它们放入一系列隐藏字段中：

$('#myform').submit(function() {
  var sel2 = $('#dualselect1 select:last-child');
  sel2.find('option').each(function(){
    var hidden = $('<input type="hidden" name="selectedOptions[]"/>');
    hidden.val($(this).val());
    sel2.after(hidden);
  });   
});

然后在PHP中，你可以使用$_POST‘’selectedOptions‘获得这些值；

Answer 2

您可以简单地修改此行jQuery( this ).attr('selected'，false)；in sel1.find....block jQuery(this).attr('selected'，true)；。在这种模式下，从第一个框移动到第二个框的所有选择都会被自动选中，因此当您提交表单时，您可以直接传递此值。试试看。

这应该是可行的：

if(t) {
        sel1.find('option').each(function(){
            if(jQuery(this).is(':selected')) {
                jQuery(this).attr('selected',true);
                var op = sel2.find('option:first-child');
                sel2.append(jQuery(this));
            }
        }); 
    }