How to get 2 select values at one time?

Question

How Can I get 2 different select values at single time ,so I can use both of them in conditions at a single time

$(document).ready(function() {

      $('#select_w').on('change', function() {
          var a = $('#select_w').find(":selected").text();

        }

        $('#select_s').on('change', function() {
            var b = $('#select_w').find(":selected").text();

          }


          //condition
          if (a == "area" && b == "circle") {
            //aread of circle
          }

          if (a == "area" && b == "square") {
            //area of square
          }

          if (a == "volume" && b == "square") {
            //volume of square
          }

        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="select_w" name="op">
  <option value="select">---Select Value---</option>
  <option value="area">Area</option>
  <option value="volume">Volume</option>
</select>

<select class="form-control" id="select_s" name="shapes">
  <option value="select">---Select Value---</option>
  <option value="circle">Circle</option>
  <option value="square">Square</option>
</select>

How can I use the var outside the function? Or is there any other approach in which i can get both select values on change and can perform operation according to the received values

You can have an answer here https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option — vieroli, Apr 24 '19 at 10:00
You have lots of unmatched brackets in your code. Please post code that actually runs, even if doesn't work as desired. — Barmar, Apr 24 '19 at 10:02
@Barmar ah, makes more sense, I've also done that before as it's nice and handy — freedomn-m, Apr 24 '19 at 10:08

score 2 · Accepted Answer · answered Apr 24 '19 at 10:10

Use val() instead of text() to get the value of select

$(document).ready(function() {

      $('#select_w,#select_s').on('change', function() {
          var a = $('#select_w').val();
          var b = $('#select_s').val();
          if(a&&b)
          {
          //condition
          if (a == "area" && b == "circle") {
            alert("aread of circle")
          }

          else if (a == "area" && b == "square") {
             alert("aread of square")
          }

          else if (a == "volume" && b == "square") {
             alert("volume of square")
          }
          else
           alert("volume of circle")
          }

       });
     
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="select_w" name="op">
  <option value="">---Select Value---</option>
  <option value="area">Area</option>
  <option value="volume">Volume</option>
</select>

<select class="form-control" id="select_s" name="shapes">
  <option value="">---Select Value---</option>
  <option value="circle">Circle</option>
  <option value="square">Square</option>
</select>

Sabith · Answer 2 · 2019-04-24T10:07:25.877

1

Create a function and call it whenever you change values in select box. Fetch select values using val() function.

Change Your function as follows:

$(document).ready(function(){
    var checkCondition = function(){
         var a = $('#select_w').val();
         var b = $('#select_s').val();
        //condition
         if(a=="area" && b=="circle"){
              //aread of circle
         }
        else if(a=="area" && b=="square"){
           //area of square
        }
        else if(a=="volume" && b=="square"){
           //volume of square
        }
    }
    $('#select_w').on('change', function() {
          checkCondition();
    }

    $('#select_s').on('change', function() {
             checkCondition();
    }
 });

edited Apr 24 '19 at 10:07

answered Apr 24 '19 at 09:58

Sabith

1,628
2
20
38

sir, using this I only get the value once I want it everytime user changes option in select – dhruv Apr 24 '19 at 10:02
1

@ravibagul91 The value of a dropdown is the value of the selected option. – Barmar Apr 24 '19 at 10:10
@dhruv created a function that will be executing each time you change the selection – Sabith Apr 24 '19 at 10:14
ya your solution is great, thankyou and even pls check deepak's ans that approach is also great – dhruv Apr 24 '19 at 10:18

score 1 · Answer 3 · answered Apr 24 '19 at 09:59

You should create a different function that fetched the value and run logic based on the condition.

 function DoStuffOnSelectChange(){
    var a = $('#select_w').val();
    var b = $('#select_s').val();
  //condition
  if(a=="area" && b=="circle"){
   //aread of circle
  }

 if(a=="area" && b=="square"){
   //area of square
 }

 if(a=="volume" && b=="square"){
   //volume of square
  }
 }

Then call this function on change of both the select elements:

 $('#select_w,#select_s').on('change',DoStuffOnSelectChange);

How to get 2 select values at one time?

3 Answers3