5

このページhttp://loudev.com/からjquerymultiselctを使用しています。これはうまく機能しますが、システム要件では、選択された順序でデータを貼り付けるためにこの複数選択が必要になります。

データは選択内容に従って配置されているため、表示に問題はありませんが、フォームを送信すると、選択されたデータの順序は選択ボックスの順序と同じになります。

ここに画像の説明を入力してください

これは上の画像に基づいてどのように機能するかです：-

ドロップダウンボックスからブラジル、フランス、オーストラリアを選択しました。選択した順に並べられています。このフォームを送信すると、表示される順序としてブラジル、フランス、オーストラリアのデータが表示されますが、受信したデータは選択ボックスの順序と同じフランス、オーストラリア、ブラジルです。

これはプラグインが生成したhtmlコードです。これは表示専用です。送信すると、非表示になっている元のオプション値を超えます。ユーザーが...をクリックした場合にのみ、「選択済み」を元のオプションの選択に設定します。

<div id="ms-public-methods" class="ms-container">
  <div class="ms-selectable">
    <ul class="ms-list">
      <li class="ms-elem-selectable ms-selected" ms-value="fr" style="display: none; ">France</li>
      <li class="ms-elem-selectable" ms-value="uk">United Kingdom</li>
      <li class="ms-elem-selectable" ms-value="us">United States</li>
      <li class="ms-elem-selectable" ms-value="ch">China</li>
      <li class="ms-elem-selectable ms-selected" ms-value="au" style="display: none; ">Australia</li>
      <li class="ms-elem-selectable" ms-value="in">India</li>
      <li class="ms-elem-selectable" ms-value="ar">Argentina</li>
      <li class="ms-elem-selectable ms-selected" ms-value="br" style="display: none; ">Brazil</li>
      <li class="ms-elem-selectable" ms-value="tb">Tibet</li>
      <li class="ms-elem-selectable" ms-value="co">Columbia</li>
      <li class="ms-elem-selectable" ms-value="cr">Croatia</li>
      <li class="ms-elem-selectable" ms-value="it">Italia</li>
      <li class="ms-elem-selectable" ms-value="es">Espana</li>
      <li class="ms-elem-selectable" ms-value="id">Indonesia</li>
      <li class="ms-elem-selectable" ms-value="du">Germany</li>
      <li class="ms-elem-selectable" ms-value="no">Norway</li>
    </ul>
  </div>
 <div class="ms-selection">
   <ul class="ms-list">
     <li class="ms-elem-selected" ms-value="br">Brazil</li>
     <li class="ms-elem-selected" ms-value="fr">France</li>
     <li class="ms-elem-selected" ms-value="au">Australia</li>
   </ul>
  </div>
</div>

あなたの助けは非常にありがたいです。

4

4 に答える 4

12

このコードは、プラグインに表示される順序で、複数選択で選択されたオプションを並べ替えます。提出すると正しい順序になります。

afterSelect: function(value){
        $('#countries option[value="'+value+'"]').remove();
        $('#countries').append($("<option></option>").attr("value",value).attr('selected', 'selected'));
      },
于 2014-03-08T16:29:18.283 に答える
5

これが私がこれまでに得たものです。プラグインのコールバック関数を使用して、値を非表示フィールドに格納し、それを配列に変換しました。値の選択を解除すると、非表示の入力フィールドにも削除されます。私はこれを試しました、そしてそれはうまくいきました！

//sample form
<form method="post">
    <select multiple="multiple" id="countries" name="countries[]">
      <option value="fr">France</option>
      <option value="uk">United Kingdom</option>
      <option value="us">United States</option>
      <option value="ch">China</option>
    </select>
    <input type="hidden" name="multiple_value" id="multiple_value"  />
    <input type="submit" name="submit" value="Submit" />
</form>


//the jquery script with callback that sets the value into the hidden field
<script>
    $(function(){
        $('#countries').multiSelect({
          afterSelect: function(value, text){
            var get_val = $("#multiple_value").val();
            var hidden_val = (get_val != "") ? get_val+"," : get_val;
            $("#multiple_value").val(hidden_val+""+value);
          },
          afterDeselect: function(value, text){
            var get_val = $("#multiple_value").val();
            var new_val = get_val.replace(value, "");
            $("#multiple_value").val(new_val);
          }
        });
    });     
</script>

 //the PHP workaround
  <?php
        if(isset($_POST['submit'])){
            $hidden = $_POST['multiple_value']; //get the values from the hidden field
            $hidden_in_array = explode(",", $hidden); //convert the values into array
            $filter_array = array_filter($hidden_in_array); //remove empty index 
            $reset_keys = array_values($filter_array); //reset the array key 
            var_dump($reset_keys); //the result
        }
  ?>
于 2012-11-06T04:29:10.327 に答える
2

選択解除を処理するためのスクリプトには、必要に応じてコンマが削除されておらず、アイテムの値が別のアイテムの値と部分的に一致する場合は失敗します（この例では識別子が一意であるためではありません）。

私はそれを次の方法で解決しました：1。）jquery.multi-select.jsの111行目に次のスニペットを追加します。

ref="' + that.escapeHTML($option.val()) + '"

に

var selectableLi = $('<li '+attributes+' ref="' + that.escapeHTML($option.val()) + '"><span>'+that.escapeHTML($option.text())+'</span></li>'),

これにより、選択可能で選択されたリストがオプション要素の値を適用するように強制されます。

2.）スクリプトに次の関数を追加する必要があります

function selectionToString() {
    var valueString = [];
    $("your-select-list-identifier").next().find('div.ms-selection li.ms-selected')
    .each(function() {
        valueString.push($(this).attr("ref"))
    });
    $("your-hidden-input-element").val(valueString.join(','));
}

3.）選択が変更されるたびにselectionToString関数を実行します。

$("your-select-list-identifier").multiSelect({
    keepOrder: true,
    afterSelect: selectionToString,
    afterDeselect: selectionToString
});

この関数は、要素の順序を維持しながら、アイテムが変更されるたびに、選択されたオプションのクリーンな文字列を生成します。表示/選択されている選択リスト内のすべてのリスト項目を検索し、それらを配列に入れ、最後に、非表示の入力フィールドに挿入されているコンマ区切りの文字列に変換/結合します。

于 2014-03-06T12:49:19.467 に答える
0

これは私のために働いています：

<!DOCTYPE html>
<!-- saved from url=(0026)http://jsfiddle.net/m/amt/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>  
<script type="text/javascript" src="https://rawgit.com/lou/multi-select/master/js/jquery.multi-select.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/lou/multi-select/master/css/multi-select.css">   
<script>   

$(document).ready(function(){
        // $('#public-methods').multiSelect();


        $('#public-methods').multiSelect({
          afterSelect: function(values){

            var get_val = ""+$("#multiple_value").val();
            //var hidden_val = (get_val != "") ? get_val+"," : get_val;
            var hidden_val = get_val+","+values;
            $("#multiple_value").val(hidden_val);
            //$("#multiple_value").val(hidden_val+""+value);             
            //alert("Selecting value: "+values);            
            alert ( "HIDDEN value: "+ hidden_val) ;

          },
          afterDeselect: function(values){

            alert("Deselect value: "+values);           
            var get_val = $("#multiple_value").val();
            var new_val = get_val.replace(","+values, "");
            $("#multiple_value").val(new_val);
            alert("HIDDEN value after deselecting: "+new_val);
          }
        }); 

        $('#select-all').click(function(){
          $('#public-methods').multiSelect('select_all');
          return false;
        });
        $('#deselect-all').click(function(){
          $('#public-methods').multiSelect('deselect_all');
          $("#multiple_value").val("");
          //alert ("HERE");
          return false;
        });     

         $('#public-methods').multiSelect('addOption', { value: 't9', text: 'test9 (s3838)', index: 0  });
         $('#public-methods').multiSelect('addOption', { value: 't1', text: 'test1', index: 1  });
         $('#public-methods').multiSelect('addOption', { value: 't10', text: 'test10'  });       
         $('#public-methods').multiSelect('addOption', { value: '22', text: 'test2'  });         
         $('#public-methods').multiSelect('addOption', { value: '33', text: 'test3'  });         
         $('#public-methods').multiSelect('addOption', { value: '2222', text: 'test22'  });         

});
</script>    

 </head>
<body>

    <form action="demo_updated.html" method="get" id = "myForm">        

    <a href='#' id='select-all'>select all</a>
    <a href='#' id='deselect-all'>deselect all</a>       

    <select id="public-methods" multiple="multiple"  >
        <option value="elem1">Elem 1</option>
        <option value="elem2">Elem 2</option>
        <option value="elem3">Elem 3</option>
        <option value="elem4">Elem 4</option>
        <option value="elem5">Elem 5</option>
        <option value="elem6">Elem 6</option>
        <option value="elem7">Elem 7</option>
    </select>     

 <input type="hidden" name="multiple_value" id="multiple_value"  />
 <input type="submit" value="Submit" >
</form>

</body>
</html>
于 2015-09-22T15:12:21.007 に答える