how to send a value from a HTML dropdown box to a JQuery function

Question

I'm very new to JQuery and don't have much experience with javascript at all, and after hours of trying to figure this out i give up. I know how to do it in PHP, but there's something I'm missing when I try it in JQuery.

I have a html-file that generates a dorpdown box that looks something like tihs:

<form action="" method="GET">
  <select id="countiesList" name="counties">
    <option value="all" selected="selected">All Counties</option>
    <option value="county1">County 1</option>
    <option value="county2">County 2</option>
    ...
  </select>
</from>

How do I get the selected value from the dropdownbox in to a JQuery function? Do I have to refer to the function I want to use in the form?
Should I have a submit button? (I'd prefer not to)

--edited-- My point is that I want to find out which of the options the user selects, so that I can use it in another function.

Thanks a lot!

im not sure what you mean by "confirm" button, but you should have some sort of "submit" button. also - are you sure you want to be using method="GET" here? — RPM1984
– RPM1984, Commented Nov 15, 2010 at 9:44

Nick Craver · Accepted Answer · 2010-11-15 09:44:20Z

3

It sounds like you want to submit it immediately on change. In that case use the change event like this:

$(function() { //run when the DOM is ready
  $("#countriesList").change(function() { //this runs when the selection changes
    $.post("myPage.php", { country: $(this).val() }, function(data) {
      //use data here
    });
  });
});

What this does is when your selection changes, we post to "myPage.php" which gets a POST variable of country, which will be the value you picked (all, country, etc). Just get this from $_POST["country"] and render your response...which will be data in the above $.post() callback. You can then do whatever you want with that response, for example if it's another <select> with state, you could append that to somewhere, for example:

$("#nextDropDownContainer").html(data);

answered Nov 15, 2010 at 9:44

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to send a value from a HTML dropdown box to a JQuery function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related