双选框未正确发布答案

【问题标题】：Dual select box not POSTing correctly双选框未正确发布
【发布时间】：2012-06-26 19:31:39
【问题描述】：

我仍在努力学习 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>

查询：

<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 发送一个值，我必须在提交之前突出显示它，否则它不会 POST。有什么想法吗？

【问题讨论】：

标签： php jquery html forms html-parsing

【解决方案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']; 获取这些值

【讨论】：

我使用了第一个示例来选择它们。这对我帮助很大，非常感谢！
没问题。就像我说的，我以前也遇到过同样的问题，这很令人沮丧！

【解决方案2】：

你可以在 sel1.find....block 中简单地修改这一行 jQuery(this).attr('selected',false); 与 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));
            }
        }); 
    }

【讨论】：