How to detect the selected value of a dropdown

Question

When I select one item from 1st dropdown, an ajax event will fire up, invoke another function that will and load information to the second dropdown. I do not want this (No button solution please)

<select id=combo1>
   <option>...</option>
   ...  
</select>
<input type=button onclick="loadCombo2()">

Stackoverflow is perfectly happy with HTML code, as you can see from the answer(s) below. — Pointy, Feb 27 '10 at 20:15
Also, I'm not sure exactly what you mean in your pseudo-code, but you can't really put a button in the middle of a ` — Pointy, Feb 27 '10 at 20:16
Important note: you was incorrectly talking about a "combo box" all the time. This is **not** a combobox. This is a dropdown (or listbox, what you like). A combobox is an *editable* dropdown. I've edited your question accordingly. — BalusC, Feb 27 '10 at 23:35
BTW: I've answered similar question in detail before: http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet — BalusC, Feb 27 '10 at 23:42
ty for edit it, and I want to apologize for my ignorance. I am reading your code from the link you are giving me now. I will ask question on that page — Thang Pham, Feb 28 '10 at 19:44

Sarfraz · Answer 1 · 2010-02-28T21:11:50.793

2

You can go about something like this:

<select id="combo1" onchange="requestSend(this.value);">
options..........
</select>

<select id="combo2">
options...........
</select>


<script>
  function requestSend(txt)
  {
     $.ajax({
      url:'process.jsp',
      data: "v=" + txt,
      cache:false,
      success: function(response){
       $("#combo2").val(response);
      }
     });
  }
</script>

....

Populating Combo2 Options:

To populate combo2 options, you need to create them in the script which process ajax request, for example in php (i don't know which language you are using), i will do something like this in ajax processing script:

// db queries to get data or whatever
// create a variable that will hold options and shown in combo2

$options = '<option value="whatever">whatever</option>' . "\n";
$options .= '<option value="whatever">whatever</option>' . "\n";
$options .= '<option value="whatever">whatever</option>' . "\n";
//........ etc

// Now we send back the $options variable which will populate the combo2
echo $options;

edited Feb 28 '10 at 21:11

answered Feb 27 '10 at 20:13

Sarfraz

377,238
77
533
578

Awesome, you think u can help me a step further. Let say that when I select an item from combo box1, I want to insert item 1, 2, 3 to combo box2 as its option. You think u can show me how to do it. Greatly appreciated. TYVM – Thang Pham Feb 27 '10 at 20:46
@Harry Pham: i have updated my answer, see at the bottom, i hope you get the idea. Thanks bye – Sarfraz Feb 27 '10 at 20:55
That must has been that I have click the wrong button. I just fixed it. Srry about that. BTW, I am wrting jsp code, so not sure about your php syntax. I hope u can help with with some jsp code...tyvm and srry about the downgrade vote – Thang Pham Feb 27 '10 at 21:32
-1 for obtrusive event registration. You're already using jQuery, it's more than easy to do it properly. – Justin Johnson Feb 27 '10 at 21:37
@Harry Pham: it's ok, well there is nothing fancy about php code, it is just created a variable and then assigning option tags to that variable, which is finally sent back. – Sarfraz Feb 27 '10 at 21:37
@Justin Johnson: you are right but i can not modify it now as the questioner has been doing what i have already done. – Sarfraz Feb 27 '10 at 21:39
Sure you can. It is our duty to give the best advice possible. – Justin Johnson Feb 27 '10 at 21:44
Weird ??? I dont think it's me who did that ! because, even when I try to vote now, it said "vote is too old to be changed unless this answer is edited". Does it has anything to do which what Justin Johnson mention above. If u edit your code, I can try to up vote u. Srry I am new to this, so sometimes I make mistake – Thang Pham Feb 28 '10 at 21:08

score 1 · Accepted Answer · answered Feb 27 '10 at 23:35

If it was being implemented in ASP.NET I'd use an HTTP handler to return the data in JSON format to the second combobox.

Using jQuery you'd call the handler in the following way to implement cascading:

$("#combo1").change(function()
{
    $("#combo2").html("");

    var valueSelected = $("#combo1").val();

    if (valueSelected != 0)
    {                 
        $.getJSON('LoadCombo2.ashx?valueSelected=' + valueSelected, function(returnedData)
        {
            $.each(returnedData, function()
            {                        
                $("#combo2").append($("<option></option>").val(this['ID']).html(this['Value']));

            });
        });
    }
});

To see how to implement the HTTP handler, take a look at a more complete step-by-step in this post:
http://www.codedigest.com/Articles/jQuery/224_Building_Cascading_DropDownList_in_ASPNet_Using_jQuery_and_JSON.aspx

If you don't need cascading the comboboxes, it gets easier. Just call the handler passing no parameters and load any data you need to fill the second combobox in the callback function of jQuery.

http://api.jquery.com/jQuery.getJSON/

Hope you get the idea.

Reading your code, as well as BalusC code, I have a pretty good idea on how to do it. Even though, it is not jsp, but the structure of the code is correct, therefore I will make your answer the correct answer. tyvm — Thang Pham, Feb 28 '10 at 21:00

How to detect the selected value of a dropdown

2 Answers2