javascript - 如果重新选择选项，如何停止 jquery 函数继续重复

Question

过去几天我一直在尝试修复这个错误，但似乎无法在任何地方找到修复程序，需要一些帮助或描述如何解决此问题的链接。我确信有一种简单的方法可以做到这一点，但我只是把它复杂化了。

我只想在从两个不同的选择中单击两个选项后能够显示商品的价格。

这是我到目前为止所拥有的，第一次就可以很好地完成工作，但是当重新选择它或单击另一个选项时，第一个选项不会消失。

jQuery(function($){
   $("select[name='type'], select[name='size']").change(function(){
      var select = $(this);
      if(select.val() === "50x25" && "Canvas"){
          $("<input>").attr({ name: "defindex", placeholder: "$150", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
      }
      else if(select.val() === "125x125" && "Canvas"){
          $("<input>").attr({ name: "defindex", placeholder: "test", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="form-control" name="type" style="width:25%;">
  <option>Type</option>
  <option value="Canvas">Canvas</option>
  <option value="Framed Print">Framed Print</option>
  <option value="Acrylic">Acrylic</option>
</select>

<select class="form-control" name="size" style="width:25%;">
  <option>Size</option>
  <option value="50x25">50x25</option>
  <option value="125x125">125x125</option>
  <option value="500x250">500x250</option>
</select>

我知道 PHP 中的 isset 功能，但只有当我单击另一个看起来俗气的按钮时，该功能似乎才起作用。

感谢您的阅读!

Answer 1

尝试以下代码:

jQuery(function($){
   $("select[name='type'], select[name='size']").change(function(){
      var select = $(this);
      var $input = select.parent().find('input');
      if($input.length === 0){
        $input = $('<input>');
      }
      if(select.val() === "50x25" && "Canvas"){
          $input.attr({ name: "defindex", placeholder: "$150", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
      }
      else if(select.val() === "125x125" && "Canvas"){
          $input.attr({ name: "defindex", placeholder: "test", readonly: "readonly" , class: "abc"}).appendTo(select.parent());
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="form-control" name="type" style="width:25%;">
  <option>Type</option>
  <option value="Canvas">Canvas</option>
  <option value="Framed Print">Framed Print</option>
  <option value="Acrylic">Acrylic</option>
</select>

<select class="form-control" name="size" style="width:25%;">
  <option>Size</option>
  <option value="50x25">50x25</option>
  <option value="125x125">125x125</option>
  <option value="500x250">500x250</option>
</select>

希望有帮助:)