2

我仍在努力学习 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。有任何想法吗？

4

2 回答 2

2

我以前遇到过这个，你有几个选择。使用 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'];

于 2012-06-25T14:23:19.967 回答
0

您可以简单地修改这一行 jQuery(this).attr('selected',false); 在 sel1.find....用 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));
            }
        }); 
    }
于 2016-09-20T07:27:30.750 回答