CODEWITHSUNDEEP
jquery
BWR
BWR

Reputation: 3

How to get the value of two selected options using jquery?

I have the following select options:

<select id="optionA">
<option> A </option>
<option> B </option>
<option> C </option>
</select>

<select id="optionB">
<option> D </option>
<option> E </option>
<option> F </option>
</select>

The following jquery code is not working to determine the text values of each selected options:

<script type="text/javascript">
    $(document).ready(function()
        {
            if($("#optionA").change() || ($("#optionB").change())
            {
                var textA = $(this).find("#optionA option:selected").text();
                var textB = $(this).find("#optionB option:selected").text();
                alert( + textA + " " + textB);
            }
        });
</script>

Any idea what might be the problem?

Upvotes: 0

Views: 106

Answers (4)

Jason McCreary
Jason McCreary

Reputation: 73011

change() takes a callback function as an event handler when the change event fires.

You need to move the code from within your if block to a callback function. Note: I've also condensed the selector and logic to utilize more of the jQuery style.

$("#optionA, #optionB").change(function() {
    var textA = $("#optionA").val();
    var textB = $("#optionB").val();
    alert(textA + " " + textB);
});

See it in action - http://jsfiddle.net/G4Lpm/1/

Upvotes: 0

aroth
aroth

Reputation: 54836

I'd suggest the following:

<select id="optionA">
  <option value="A"> A </option>
  <option value="B"> B </option>
  <option value="C"> C </option>
</select>

<select id="optionB">
  <option value="D"> D </option>
  <option value="E"> E </option>
  <option value="F"> F </option>
</select>

<script type="text/javascript">
    function selectChanged() {
        var textA = $("#optionA").val();
        var textB = $("#optionB").val();
        alert(textA + " " + textB);
    }

    $(document).ready(function() {
        $("#optionA,#optionB").change(selectChanged);
    });
</script>

Example: http://jsfiddle.net/crnrY/

Upvotes: 2

Emre Yazici
Emre Yazici

Reputation: 10174

You need to write your event handlers like this:

$("#optionA,#optionB").change(function() {
   var textA = $("#optionA").val();
   var textB = $("#optionB").val();
   alert( + textA + " " + textB);
});

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77996

$('#optionA, #optionB').change(function()
{
    alert($('#optionA').val() + ' ' + $('#optionB').val());
});

http://jsfiddle.net/upZKt/1/

Upvotes: 0

Related Questions