Question

我有一个带有选择列表的表单，如果没有列出用户需要的项目，他们可以通过另一个输入框添加它，然后该项目将被附加到选择列表。

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

现在，我的问题是如果用户输入多个单词项目（例如'来自HP的'John'），短语中的空格无法正确传输（请参阅下面的FireBug）：

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

我正在使用以下jQuery代码从my other question附加项目：

$(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>

Answer 1

挑剔：

this.parent()应为$this.parent()。
(this).html($options);应为$this.html($options);（或者$(this).html($options);？）。

除此之外，John%20from%20HP可以使用John from HP转换为unescape()，但我建议在这种情况下使用decodeURIComponent()。（因为您最初使用过encodeURIComponent()。）

由于您无法对find()恢复的内容进行编码/解码（因为它是jQuery对象，而不是字符串），您可以重新组织代码，如下所示：

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

您可以在行动in this jsFiddle中看到代码（忽略此处的排序代码）。

如果此代码仍未完全正常工作，我们需要查看一个实例。

jQuery将项添加到选择列表

1 个答案: