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

您可以在sel1.find ....块中修改此行 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));
            }
        }); 
    }

双选框未正确发布

2 个答案: