带有jquery ajax的复选框的组合框在jsp中

时间:2013-11-07 05:33:58

标签: jquery ajax

我希望通过jquery ajax将复选框添加到组合框。我收到从Servlet到ajax的响应,现在我想用复选框将该数据添加到组合框。我成功添加了具有以下代码的combox框。现在我想在该combox框中添加复选框。提前致谢。

<script>
var xmlhttp;
$(function(){
$('#sl1').change(function(){
    populateSelect();       
});
    });


function populateSelect()
{   
    var s1=$('#sl1').val();
    $('sl2').html('');      
    $.ajax({
        type:"GET",
        url:"Servlet1",
        data:{"state":s1},
        datatype:"text",
        success:function(data){
            if(data){   
                var d1=[];
                d1=data.split(",");             

                var $select = $('#sl2').empty();

                for (var i = 0; i < d1.length; i++) {

  var o = $('<option/>', { value: d1[i] })                      
                .text(d1[i])
                .prop('selected', i == 0);                      
                    o.appendTo($select);            

                }
            }
        }

    });
}
</script>
</head>
<body>

<form name="form1" >

select State <select id="sl1">
            <option value="" selected>Select State</option>
            <option value="1">Andhra Pradesh</option>
            <option value="2">Tamil Nadu</option>
            <option value="3">Maharastra</option>
            <option value="4">Kerala</option>
</select>               


<select name="sl2" id="sl2" multiple>

</select>  
 </form>

1 个答案:

答案 0 :(得分:0)

你可以使用这个jquery插件: http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

function populateSelect()
{
    var s1 = $('#sl1').val();
    $('sl2').html('');
    $.ajax({
        type: "GET",
        url: "Servlet1",
        data: {"state": s1},
        datatype: "text",
        success: function(data) {
            if (data) {
                var d1 = [];
                d1 = data.split(",");

                var $select = $('#sl2').empty();

                for (var i = 0; i < d1.length; i++) {

                    var o = $('<option/>', {value: d1[i]})
                            .text(d1[i])
                            .prop('selected', i == 0);
                    o.appendTo($select);

                }
                $select.multiselect();
            }
        }

    });
}