如何一次获得2个选择值?

时间:2019-04-24 09:54:31

标签: jquery html

如何一次获得2个不同的选择值,所以我可以一次在条件中使用这两个值

$(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>

如何在函数外部使用var? 还是有其他方法可以让我同时获取更改的两个选择值并可以根据接收到的值执行操作

4 个答案:

答案 0 :(得分:2)

使用val()代替text()获得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>

答案 1 :(得分:1)

创建一个函数,并在选择框中更改值时调用它。 使用val()函数获取选择值。

如下更改您的功能:

$(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();
    }
 });

答案 2 :(得分:1)

您应该创建一个其他函数来获取值并根据条件运行逻辑。

 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
  }
 }

然后在更改两个选择元素时调用此函数:

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

答案 3 :(得分:-1)

也许您正在寻找这个

 $(document).ready(function(){

     $('#select_w, #select_s').on('change', function() {
        var a = $('#select_w').find(":selected").text();
        var b = $('#select_s').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
        }
    });

 });