how to synchronise two combo boxes

Question

I know this question been asked few times before I have been looking at the previous examples but none of them seem to solve my problem. I have two combo boxes 'Clients' and 'Users' when I dropdown the Clients all it's users should load into second dropdown (from database). When I dropdown the 'Clients' I want to pass it's id as parameter in order to get the right users. At alert I'm getting the correct clientId but how can I convert it to java String so it could be passed into jsp. I'm using jQuery and this is what I have so far;

jQuery(function($) {
$('#box1').on('change', function() {
  var clientId = $('option:selected', this).val();
    alert(clientId);
    });
});

Ajax will do it for you ! – Dimag Kharab Mar 13 '14 at 12:54 — Dimag Kharab, Mar 13 '14 at 12:54
Read some tutos about ajax, best advice i guess – A. Wolff Mar 13 '14 at 12:56 — A. Wolff, Mar 13 '14 at 12:56
http://stackoverflow.com/q/4112686/1031945 – Aniket Kulkarni Mar 13 '14 at 13:05 — Aniket Kulkarni, Mar 13 '14 at 13:05

score 0 · Accepted Answer · answered Mar 13 '14 at 13:05

0

option 1:

You can convert java strings into JSON objects , so that you can iterate them through jquery in your jsp page.

option 2:

You could send the list to the jsp , so that you can iterate your list to get the data using JSTL

Hope it helps !!

answered Mar 13 '14 at 13:05

Santhosh

8,181
4
29
56

Thank you for all your replies, this is what I have now but still not carrying the 'clientId' it's null. jQuery(function($) { $('#box1').on('change', function() { var clientId = $('option:selected', this).val(); $.ajax({ type: "POST", url: "PassUsers", data: "{'clientId':'" + clientId + "'}", contentType: "application/json", async: false, success: function (data) { $("#response").html(data.d); } }); }); }); – Mar 13 '14 at 14:12
if you are getting the response object as `null` , then check with another page where you are passing the reference – Santhosh Mar 14 '14 at 04:35
Thanks for your reply san I'm still not there yet. I've changed my code like so `function process(str) { if (str == "") { document.getElementById("box1").innerHTML = ""; return; } $.get('PassUsers?id=' + str + '', function() { }); }` now I'm getting the 'Id' and taking it to servlet and using it as Parameter it's executing the query and printing out the correct result BUT after adding it to List I can not bring it to jsp page Why?? ` request.getRequestDispatcher("/somepage.jsp").forward(request, response);` – Mar 14 '14 at 14:54
Can someone please tell me I'm getting the right result at `Header` and `Response` but on screen it's blank why ??? It's the second dropdown that does not get data. – Mar 16 '14 at 07:43

score 0 · Answer 2 · answered Mar 17 '14 at 08:16

It's been painful four days and four nights, this is what worked for me;

$(document).ready(function() {
$('#box1').change(function(event) {
    var $clientId = $("select#box1").val();
    $.get('PassUsers', {
        id : $clientId
    }, function(responseJson) {
        var $select = $('#box2');
        $select.find('option').remove();
        $.each(responseJson, function(key, value) {
            $('<option>').val(key).text(value).appendTo($select);
        });
    });
  });
});
<select id="box2"  name="musrId">
    <option></option>
</select>

In the servlet I've used a LinkedHashMap.

Guess you could make this as the working solution rather than mine :) — Santhosh, Mar 20 '14 at 10:25

how to synchronise two combo boxes

2 Answers2