每次選擇新選項時如何觸發jQuery函數？

Question

我有一個HTML <form>帶有<select>能力下拉菜單<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> 。

一旦最終用戶選擇了某個選項，就不可能返回到“選擇品牌”選項。

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

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

還是使用JavaScript，您最多要檢查packagePrice是否undefined並且可以使用條件（三元）運算符 packagePrice ? packagePrice + ' USD' : 'Default price'來做到這packagePrice ? packagePrice + ' USD' : 'Default price' packagePrice ? packagePrice + ' USD' : 'Default price' 。

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

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

Answer 3

檢查value而不是類b ，因此刪除選擇器的類b並像這樣檢查value ，如果值是"" ，則顯示Defalut price否則，顯示value 。

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

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

 <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 value選項，因此，當用戶選擇class類a第一個選項packagePrice獲得value undefined 。

要解決此問題：您必須檢查packagePrice是否undefined 。

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

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

 <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="150">Opel</option> <option class="b" value="500">Audi</option> </select> </form> <br /><br /> <div class="price-here">Default price</div> 

Answer 4

如評論中已經提到的

嘗試添加更改事件偵聽select.car-selector時，沒有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的元素之后包含.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，並且需要獲取的值是選項中的select onot的值。

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

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