0

選択リストのあるフォームがあります。ユーザーが必要とするアイテムがリストされていない場合は、別の入力ボックスを使用して追加すると、アイテムが選択リストに追加されます。 

$("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);

さて、私の問題は、ユーザーが複数の単語の項目（たとえば、「HPのジョン」）を入力した場合、フレーズ内のスペースが正しく転送されないことです（以下のFireBugを参照）。

<option hp="" from="" value="John">John from HP</option>

次のjQueryコードを使用して、他の質問の項目を追加しています。

$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', this.parent()).each(function(i,v){ // loop through relative selects
            var $options = $(v).find('option'); // get all options
            $options = $options.sort(function(a,b){ // sort by value of options
                return a.value - b.value;
            });
        (this).html($options); // add new sorted options to select
        });
    });   
});

転送前にエンコードし、後でデコードする必要があるようなものです。

jsfiddleが機能しないので、コードは次のとおりです。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>

<body>
<p>
    <input type="text" name="misc_userID" id="misc_userID" value="" size="30" max="100" />
</p>
<p>
    <input type="button" name="misc_AddUpdate_btn" id="misc_AddUpdate_btn" value="Save Contributor" />
</p>
<p>
    <select name="group_misc_available" size="10" multiple="multiple" id="group_misc_available" class="group_misc_selects_control" style="width:140px;">
        <option value="Option 1">Option 1</option>
        <option value="option 2">Option 2</option>
    </select>
    <img src="../Common/MultiSelect/img/switch.png" width="30" height="30" />
    <select name="group_misc_selected" size="10" multiple="multiple" id="group_misc_selected" class="group_misc_selects_control"  style="width:140px;">
    </select>
</p>
<script>
$(document).ready(function() {
    $('select').change(function() {
        var $this = $(this);
        $this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
        $('select', $this.parent()).each(function(i,v){                 // loop through relative selects
            var $options = $(v).find('option');                         // get all options
            $options = $options.sort(function(a,b){                     // sort by value of options
                return a.value - b.value;
            });
            $(this).html($options);                                     // add new sorted options to select
        });
    });   
    $('#misc_AddUpdate_btn').click(function(){
            var contributor = $('#misc_userID').val();
            if ( (contributor==null) || (contributor=="") ){
                //    do nothing
                alert('You must enter the Miscellaneous Contributor first.');
            }
            else {
                //    console.log('button pressed');
                var path_to_save_contributor = '/vtil/ajax/GroupContributor_Misc_lookup.cfm';
                var data_to_send = 'misc_userID='+contributor;

                $("#misc_userID").effect("transfer", { to: $("#group_misc_available") }, 500);
                setTimeout(function() {AddElement(contributor);}, 500);
            }
        });

        function AddElement(contributor){
                    $('#misc_userID').val('');    // reset value back to null    
                    var UpdateItem=decodeURIComponent(contributor);
                    $("#group_misc_available").append('<option value=' + UpdateItem + '>' + UpdateItem + '</option>');
                }
    });
</script>


</body>
</html>
4

1 に答える 1

1

要点:

  • this.parent()する必要があります$this.parent()。
  • (this).html($options);あるべきです$this.html($options);（または多分$(this).html($options);？）。

これらは別として、を使用してJohn%20from%20HP変換できますが、この場合は代わりにを使用することをお勧めします。（最初に使用したため。）John from HPunescape()decodeURIComponent()encodeURIComponent()

によって復元されたものをエンコード/デコードできないためfind()(文字列ではなく jQuery オブジェクトであるため)、次のようにコードを再編成できます。

$this.find('option:selected')
     .html(decodeURIComponent($this.find('option:selected').html()))
     .appendTo($this.siblings('select'));

この jsFiddle でコードの動作を確認できます(ここでは並べ替えコードは無視されます)。

このコードがまだ正確に機能しない場合は、実際の例を確認する必要があります。

于 2012-10-03T20:11:24.613 に答える