0

jquery ajaxでコンボボックスにチェックボックスを追加したいです。Servlet から ajax への応答を受信して​​います。そのデータをチェック ボックス付きのコンボ ボックスに追加します。次のコードでコンボボックスを正常に追加しました。今、そのコンボボックスにチェックボックスを追加したい。前もって感謝します。

<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>
4

1 に答える 1

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();
            }
        }

    });
}
于 2013-11-07T05:49:31.937 に答える