如何在每次选择新选项时触发jQuery函数？

Question

我有一个带有<form>下拉列表<select>的HTML <option>，其中每个<option>都有一个代表所选车辆价格的值标记。

我希望<div class="price-here">每次<option class="b">时都显示所选选项的值。

在我的代码中，我使用了change()函数，但它似乎不起作用。有什么问题？

HTML + CSS：

<script>
    $('select.car-selector').change(function () {
      var packagePrice = $(".car-selector option.b:selected").val();
      $('div.price-here').text(packagePrice + " USD");
    });
</script>
<form>
  <select class="car-selector">
    <option class="a" value="" selected>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

Answer 1

试试这段代码：

$('select.car-selector').change(function () {   
    if($(this).hasClass('b')){
        var packagePrice = $(".car-selector").val();
        $('div.price-here').html(packagePrice + " USD");
    }
    else
       $('div.price-here').html('');
});

Answer 2

只需使用 HTML ，即可在第一个选项disabled中添加<option class="a" value="" selected disabled>Select brand</option>属性。

一旦最终用户选择了某个选项，将无法返回选项＆＃34;选择品牌＆＃34;。

＆＃13;

＆＃13;

$('select.car-selector').change(function () {       
  var packagePrice = $('.car-selector option.b:selected').val();
  $('div.price-here').text(packagePrice + ' USD');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="car-selector">
    <option class="a" value="" selected disabled>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

＆＃13;

＆＃13;

＆＃13;

或者使用 JavaScript ，您最常检查packagePrice不是undefined，您可以使用Conditional (ternary) Operator packagePrice ? packagePrice + ' USD' : 'Default price'执行此操作。

＆＃13;

＆＃13;

$('select.car-selector').change(function () {       
  var packagePrice = $('.car-selector option.b:selected').val(),
      text = packagePrice ? packagePrice + ' USD' : 'Default price';
  $('div.price-here').text(text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="car-selector">
    <option class="a" value="" selected>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

检查value而不是类b，因此请移除选择器的b类并检查value，如果值为""则显示{{1} }}显示Defalut price。

value

＆＃13;

＆＃13;

$(document).ready(function(){
    $('select.car-selector').change(function () {       
      var packagePrice = $(".car-selector option:selected").val();
      packagePrice = $.trim(packagePrice);
      if(packagePrice !=="")
        $('div.price-here').text(packagePrice + " USD");
      else 
        $('div.price-here').text('Default price');
    })
})

＆＃13;

$(document).ready(function(){
    $('select.car-selector').change(function () {       
      var packagePrice = $(".car-selector option:selected").val();
      packagePrice = $.trim(packagePrice);
      if(packagePrice !=="")
        $('div.price-here').text(packagePrice + " USD");
      else 
        $('div.price-here').text('Default price');
    })
})

＆＃13;

＆＃13;

＆＃13;

  

在您的情况下： <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <form> <select class="car-selector"> <option class="a" value="" selected>Select brand</option> <option class="b" value="150">Volvo</option> <option class="b" value="350">Saab</option> <option class="b" value="250">Opel</option> <option class="b" value="500">Audi</option> </select> </form> <br /><br /> <div class="price-here">Default price</div> 是用户选择它的类packagePrice的值选项，因此当用户选择类b {{1}的第一个选项时获取值a。

要修复它：，您必须检查packagePrice是否为undefined。

packagePrice

＆＃13;

＆＃13;

undefined

＆＃13;

$(document).ready(function(){
    $('select.car-selector').change(function () {       
      var packagePrice = $(".car-selector option.b:selected").val();
      if(packagePrice!=undefined)
        $('div.price-here').text(packagePrice + " USD");
      else
        $('div.price-here').text("Default price");
    });
})

＆＃13;

＆＃13;

＆＃13;

Answer 4

正如this comment

中已提到的那样

  

您尝试添加更改事件侦听器时没有select.car-selector。

您可以通过返回其长度来检查是否存在DOM元素：https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  console.log("Before: ", $("select.car-selector").length);
  // $("select.car-selector") is not in the DOM
  $('select.car-selector').change(function() {
    var packagePrice = $(".car-selector option.b:selected").val();
    $('div.price-here').text(packagePrice + " USD");
  });
</script>
<form>
  <select class="car-selector">
    <option class="a" value="" selected>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

<script>
  console.log("After: ", $("select.car-selector").length);
  // select.car-selector exists in the DOM
</script>

因此，解决方案是在引用的元素之后包含.change脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  console.log("Before: ", $("select.car-selector").length);
</script>
<form>
  <select class="car-selector">
    <option class="a" value="" selected>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

<script>
  console.log("After: ", $("select.car-selector").length);
  $('select.car-selector').change(function() {
    var packagePrice = $(".car-selector option.b:selected").val();
    $('div.price-here').text(packagePrice + " USD");
  });
</script>

Answer 5

你应该使用id，你需要获得的值是选项中选择onot的值。

＆＃13;

＆＃13;

    $('#car-selector').change(function () {       
      var packagePrice = $("#car-selector").val();
      $('div.price-here').text(packagePrice + " USD");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="car-selector">
    <option class="a" value="" selected>Select brand</option>
    <option class="b" value="150">Volvo</option>
    <option class="b" value="350">Saab</option>
    <option class="b" value="150">Opel</option>
    <option class="b" value="500">Audi</option>
  </select>
</form>
<br /><br />
<div class="price-here">Default price</div>

＆＃13;

＆＃13;

＆＃13;