2

私はまだjqueryを学ぼうとしているので、我慢してください。そこに移動した後、2番目の選択ボックスのすべての結果を選択した場合にのみ機能する二重選択ボックスがあります。私が欲しいのは、最初のボックスが値を2番目の2番目の選択ボックスに転送するときです。オプションを強調表示する必要はありませんが、フォーム送信時にその2番目の選択ボックスを投稿します。これが私が持っているものです：

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に値を送信する場合は、送信する前に値を強調表示する必要があります。そうしないと、POSTされません。何か案は？

4

2 に答える 2

2

私は以前にこれに出くわしたことがあり、いくつかのオプションがあります。JS を使用すると、2 番目のボックスのすべての値を非表示フィールドにもプッシュできます。または、JS を使用して、2 番目のボックスのすべての値をフォームの 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....block with jQuery(this).attr('selected',true); で . このモードでは、最初のボックスから 2 番目のボックスに移動した選択が自動的に選択されるため、フォームを送信するときにこの値を直接渡します。それを試してみてください。

これはうまくいくはずです：

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 に答える