jQuery将项目追加到选择列表

Question

我有一个带有选择列表的表单，如果未列出用户需要的项目，则可以通过另一个输入框将其添加，然后将该项目追加到选择列表中。

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

现在，我的问题是，如果用户输入多个词项（例如，“ John from 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>

Answer 1

刺针：

this.parent()应该是$this.parent() 。
(this).html($options); 应该是$this.html($options); （或者$(this).html($options); ）。

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

由于您无法对通过find()恢复的内容进行编码/解码（因为它是一个jQuery对象，而不是字符串），因此您可以像这样重组代码：

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

您可以在此jsFiddle中查看运行中的代码（此处忽略排序代码）。

如果此代码仍然无法正常运行，我们需要查看一个示例。

jQuery将项目追加到选择列表

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-10-03 20:11:24

jQuery将项目追加到选择列表

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-10-03 20:11:24

解决方案1
1 已采纳 2012-10-03 20:11:24