使用Jquery从多选框中添加、删除值

Question

我有一个多个选择框与城市对应的国家，使用户可以选择多个城市。在填写表单的过程中，用户必须先选择国家，然后需要在多个选择框中相应地更改城市。下面是我的国家选择框和城市多个SB。

<select name="country" id="country" onchange="ajax_change(this.value)">
    <option value="">--Select Country--</option>
    <? echo $countryList;?>
</select>

这是多选框

<select multiple="multiple" name="cities[]" id="cities[]" style="height:150px; width:300px;">
    <option value="">-- Select City --</option> 
</select>

这是成功返回城市列表的ajax代码。

<script type="text/javascript">
    function ajax_change(val)
    {

        jQuery.post(
            '<?=WEB_ROOT?>index.php?rt=admin/airport/ajax',
            {
                val:val,
                type:'get_cities'
            },
            function(data){
                $('#cities[]').val(data);
            }
        );
    }
</script>

但是$('#cities[]').val(data)不起作用。你能请任何人帮我这个忙吗。

Answer 1

您希望使用$.each函数遍历返回的数据(我假设它是JSON)，然后将新创建的项附加到列表中。

试一试：

HTML

<select id='select' />​

Javascript

var data = {
    'name1':'value1',
    'name2':'value2'
};

$.each(data, function(key, value) {
    $('#select').append($("<option/>").text(key).val(value));
});

jsfiddle中的上述代码：jsfiddle

您还希望从ID中删除方括号。

Answer 2

只需使用一个类并从id标记中删除[]

<select multiple="multiple" name="cities[]" class="cities" style="height:150px; width:300px;">
    <option value="">-- Select City --</option>
</select>

和

<script type="text/javascript">
    function ajax_change(val)
    {
       //alert(val);

       jQuery.post('<?=WEB_ROOT?>index.php?rt=admin/airport/ajax',
           {val:val,type:'get_cities'},
           function(data){
               $('.cities').val(data);
           }
       );
    }
</script>