Question

我使用jQuery，根据用户在文本字段上的输入来更改下拉菜单中的选项。下拉选择的选项已成功更改，但价格未更改。手动更改下拉选项时，价格会发生变化。请检查以下示例来说明问题。谢谢。 https://jsfiddle.net/pebuf9s0/

代码段如下，

function calculatePrice(){
        var widthinput= $("#text-width").val();
        var heightinput= $("#text-height").val();
        var thickness= $("#material").prop('selectedIndex');
        switch(thickness){
          case(0):
            acrylicprice = 3.40;
            thicknessinput= '1/8';
            break;
          case(1):
            acrylicprice = 5.82;
            thicknessinput= '1/4';
            break;
        }

        widthinput = calculateBoundary(Number(widthinput));
        heightinput = calculateBoundary(Number(heightinput));

        $('[name=width-select-field] option').filter(function() {    
          return ($(this).text() == widthinput);
        }).prop('selected', true);            
        $('[name=height-select-field] option').filter(function() {    
          return ($(this).text() == heightinput);
        }).prop('selected', true);
        $('[name=material-select-field] option').filter(function() {    
          return ($(this).text() == thicknessinput);
        }).prop('selected', true);


      }

      function finalprice(){
        var widthinput= $("#widthselect").val();
        var heightinput= $("#heightselect").val();
        var thickness= $("#materialselect").prop('selectedIndex');
        switch(thickness){
          case(0):
            acrylicprice = 5.82;
            break;
          case(1):
            acrylicprice = 3.40;
            break;
        }
        var areas = (widthinput * heightinput);
        var sfootage = areas/144;
        var finalprice = ((((widthinput * heightinput)/144)*acrylicprice)).toFixed(2);
        $(".result").html("Width:"+widthinput+"<br/>Height:"+heightinput+"<br/>Area:"+areas+"<br/>Sq.Foot:"+sfootage+"<br/><br/>Price"+finalprice);
      }


      function calculateBoundary(val) {
        if(val == undefined || val == '' || val == null || isNaN(val))
          return 0;
        for(let i=0; i< boundaryArr.length;i++){
          if(val <= boundaryArr[i].max)
            return boundaryArr[i].out
        }
      }
      var acrylicprice=3.4;
      var boundaryArr = [ 
        {max:10, out:9},
        {max:13, out:12},
        {max:16, out:16},
        {max:22, out:18},
        {max:27, out:24},
        {max:33, out:32},
        {max:44, out:36},
        {max:56, out:48},
        {max:65, out:60},
        {max:79, out:72},
        {max:87, out:84},
        {max:100, out:96}]

      $(document).ready(function() {

        $("#widthselect, #heightselect, #materialselect").change(function(){
          finalprice();
        })

        $("#text-width, #text-height")
          .focusout(
          function(){
            calculatePrice();
          });
        $("#material").change(function(){
          calculatePrice();
        })


      });

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>focusout demo</title>  
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>

    <input id="text-width" placeholder="width">
    <input id="text-height" placeholder="height">
    <label>Material</label>
    <select name="mat-select-field" id="material">
      <option value="1/4">1/8</option>
      <option value="1/8">1/4</option>
    </select>
    <br>
    <!-- Values from below fields auto update values from above inputs and are used to calculate price-->
    <select name="width-select-field" id="widthselect" class="widthselect">
      <option value="9">9</option>
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="32">32</option>
      <option value="36">36</option>
      <option value="48">48</option>
      <option value="60">60</option>
      <option value="72">72</option>
      <option value="84">84</option>
      <option value="96">96</option>
    </select>
    <select name="height-select-field" id="heightselect" class="heightselect">
      <option value="9">9</option>
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="18">18</option>
      <option value="24">24</option>
      <option value="32">32</option>
      <option value="36">36</option>
      <option value="48">48</option>
      <option value="60">60</option>
      <option value="72">72</option>
      <option value="84">84</option>
      <option value="96">96</option>
    </select>
    <select name="material-select-field" id="materialselect" class="materialselect">
      <option value="1/8">1/8</option>
      <option value="1/4">1/4</option>
    </select>
    <br>
    <br>
    <p class="result"></p>

  </body>
</html>

下拉选项通过jQuery更改，但相关事件未更改

0 个答案: