將JavaScript函數轉換為jQuery-選擇選項列表

Question

從字面上看，這是我第一次使用jQuery，並且閱讀了本書的整章內容，但是很難找到解決方法。 我正在嘗試將JavaScript函數（一個簡單的選項選擇下拉列表）轉換為jQuery。 我已經嘗試過從書中或從w3schools和api.query獲得的幾行代碼，但無濟於事。 我將嘗試使其變得快速而簡單，由於某種原因我只是無法理解jQuery。

我嘗試過的通常不起作用。 在我的選項列表無法正常工作之前，我嘗試進行試驗，但距離沒有太遠。

我也對這個問題的含糊之處表示歉意，我將不勝感激！ 這是我嘗試過的方法：

$(document).ready( function () { 
var c = ???
if ($(c... 

calc.js和它下面的index.html

 function selectedCountry() { var c = document.getElementById("countryChooser").value; var message; if (c == "nothing") { //if they selected the default option, error pops up. alert("Please select a country."); } else if (c == "usa") { message = "United States of America"; document.getElementById("count").innerHTML = "Your country is: " + message; } else if (c == "canada") { message = "Canada"; document.getElementById("count").innerHTML = "Your country is: " + message; } else { message = "Mexico"; document.getElementById("count").innerHTML = "Your country is: " + message; } } 

 <script src = "calc.js"></script> <!--JavaSript link --> <select name="countrylist" id="countryChooser" onchange="selectedCountry()"> <option value="nothing">Select a country</option> <option value="usa">United States of America</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> <p id="count"></p> 

Answer 1

通過ID獲取元素：

var c = $('#countryChooser');

獲取此輸入/選擇元素的值

var value = c.val();

使用元素ID設置元素的html

$('#count').html('some html');

或設置文本（無法以這種方式解析html）

$('#count').text('some html');

您還可以使用jQuery處理事件

$(document).ready(function() {
   $('#countryChooser').on('change', function(event) {
       // this is the DOM element with the id 'countryChooser'
       // same as the native: var val = this.value;
       var val = $(this).val();
       // ...
   });
});

Answer 2

通過jQuery您可以像下面這樣：

范例： -

 $(document).ready(function(){ $('#countryChooser').change(function(){ // on change of select if($(this).val()!=='nothing'){ // if selected value is some country $('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph }else{ $('#count').html(""); alert('Please select a country.'); // alert for selecting a country } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="countrylist" id="countryChooser"> <option value="nothing">Select a country</option> <option value="usa">United States of America</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> <p id="count"></p> 

Answer 3

我已經將選擇列表的onchange()事件綁定到jQuery(document).ready()方法中。 看一下這個-

//更新的代碼-

 $(document).ready(function (){ $('#countryChooser').on('change' ,function () { if(this.selectedIndex){ $('#count').html("Your country is: "+ this.options[this.selectedIndex].text); }else{ $('#count').html(""); alert("Please select a country."); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src = "calc.js"></script> <!--JavaSript link --> <select name="countrylist" id="countryChooser"> <option value="nothing">Select a country</option> <option value="usa">United States of America</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> <p id="count"></p> 

Answer 4

 $('#countryChooser').change(function(){ var selectedCountry = $(this).val(); if(selectedCountry == 'nothing'){ console.log('Select A country'); } else{ $('#count').html('Your country is '+$('#countryChooser option:selected').text()); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--JavaSript link --> <select name="countrylist" id="countryChooser" > <option value="nothing">Select a country</option> <option value="usa">United States of America</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select> <p id="count"></p> 

請檢查代碼可能會幫助您，謝謝