Pass option select variable with jquery

Question

Noob here trying to do something simple with Jquery. Basically I have a small select-option dropdown like this:

<select onchange="javascript:swapContent('con3');">
    <option>selection 1</option>
    <option>selection 2</option>
    <option>selection 3</option>
</select>

Currently it is posted via ajax to a $php variable here:

$contentVar = $_POST['contentVar'];

javascript function is here:

<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";
    $.post(url, {contentVar: cv} ,function(data) {
        $("#myDiv").html(data).show();
    });    
}
</script>

How can I instead post the value of the select-option dropdown?

I realize this is basic, but I have to start somewhere and cannot find a tutorial that shows me how to do what I need. Thank you for your help.

By "select-option" do you mean the value of the selected option in the select control? — crush
– crush, Commented Jan 10, 2013 at 15:51

Darin Dimitrov · Accepted Answer · 2013-01-10 15:52:30Z

How can I instead post the value of the select-option dropdown?

If you want to send values yo tour script you should start by giving values to your option elements (and an id to your <select> element to be able to use it and retrieve the selected value):

<select onchange="javascript:swapContent('con3');" id="myselect">
    <option value="value1">selection 1</option>
    <option value="value2">selection 2</option>
    <option value="value3">selection 3</option>
</select>

and then:

// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
    $("#myDiv").html(data).show();
});

If on the other hand you wanted to send the text of the selected option you could use this:

// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
    $("#myDiv").html(data).show();
});

Now inside your PHP script you could fetch the value:

$_POST['selectedValue']

Chase · Accepted Answer · 2013-01-10 15:52:52Z

2

HTML:

Remove the inline javascript change event from the select.

<select>
  <option>selection 1</option>
  <option>selection 2</option>
  <option>selection 3</option>
</select>

jQuery:

Bind a change event to your select. Inside this event, this.value with be the value of the select.

$(document).on("change", "select", function(){
    $("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "myphpscript.php";

    $.post(url, {contentVar: this.value} ,function(data) {
        $("#myDiv").html(data).show();
        });    
});

answered Jan 10, 2013 at 15:52

Chase

29.6k1 gold badge52 silver badges49 bronze badges

Comments

crush · Accepted Answer · 2013-01-10 15:53:04Z

2

var val = $('select option:selected').text();

Using jQuery's selector syntax, you first select the "select" control, and then the "option" child of the select control. You then look for the selected state. Finally, return the text.

Of course, as is, this code will select every "select" control on the page. It would be better to give your select control an id:

<select id="mySelect">
    <option>Some option</option>
    <option>Some other option</option>
</select>

Then the code becomes

var val = $('#mySelect option:selected').text()

answered Jan 10, 2013 at 15:53

crush

17.1k10 gold badges65 silver badges104 bronze badges

Comments

Simon Martin · Accepted Answer · 2013-01-10 15:58:36Z

1

You might want to consider an unobtrusive JavaScript approach and not have the on-change event in your html mark-up, instead attach an event handler as shown below, from the jQuery API site

<!DOCTYPE html>
<html>
 <head> 
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
  <select name="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Fudge</option>
    <option>Cookie</option>
 </select>
 <div></div>
 <script>
   $("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
       str += $(this).text() + " ";
    });
    $("div").text(str);
   })
  .change();
 </script>
 </body>
</html>

answered Jan 10, 2013 at 15:58

Simon Martin

4,2317 gold badges60 silver badges95 bronze badges

3 Comments

crush Over a year ago

Consider changing $("select option:selected"); to $('option:selected', this); also, .each(function() { str += $(this).text() + " "; }); should be .each(function(k,v) { str += v.text() + " "; });

crush Over a year ago

Overall, I think this idea is best, with a few optimizations.

Simon Martin Over a year ago

@crush the code is more or less as it was on the api.jquery site. I haven't changed it as your suggestion in order to keep it consistent with the documentation there - but agree with what you've recommended there.

Collectives™ on Stack Overflow

Pass option select variable with jquery

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related