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

這實際上是我第一次使用jQuery，並閱讀了我的教科書中的整個章節，但我發現很難將它放在頭上。我試圖將JavaScript函數（簡單的選項選擇下拉列表）轉換爲jQuery。我試過了幾行代碼，這些代碼是從書中或者從w3schools和api.query中得到的，但無濟於事。我會盡量簡化這個過程，因爲某些原因我無法理解jQuery。將JavaScript函數轉換爲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()"> 
 
\t <option value="nothing">Select a country</option> 
 
\t <option value="usa">United States of America</option> 
 
\t <option value="canada">Canada</option> 
 
\t <option value="mexico">Mexico</option> 
 
</select> 
 
<p id="count"></p>

來源

2017-05-08 Luke Sitler

jQuery很容易理解，現在你似乎正在努力使用[selector]（https://www.w3schools.com/jquery/jquery_ref_selectors.asp）。什麼'document.getElementById（「countryChooser」）'做的是在HTML中找到一個id爲_countryChooser_的元素，用jQuery代碼替換這個元素，你需要做'$（「＃countryChooser」）'並且得到值可以使用'.val（）'PS你的代碼可能更適合使用'switch'，如果這是你所有的代碼，變量'message'是毫無意義的，我希望這有助於。 – George

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

來源

2017-05-08 10:34:51

是的，我會將您鏈接到我上傳的合法網站。 http://wheeloftimestory.webege.com/user.html –

@LukeSitler您的網站沒有在我的最後打開。嘗試從過去24小時 –

通過ID獲取元素：

var c = $('#countryChooser');

Ge Ť此輸入的值/選擇元件

var value = c.val();

使用元素的id

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

設置一個元素的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(); 
     // ... 
    }); 
});

來源

2017-05-08 10:33:20

我已在onchange()事件jQuery(document).ready()方法中的選擇列表中的綁定。檢查這個OUT-

//更新代碼 -

$(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"> 
 
\t <option value="nothing">Select a country</option> 
 
\t <option value="usa">United States of America</option> 
 
\t <option value="canada">Canada</option> 
 
\t <option value="mexico">Mexico</option> 
 
</select> 
 
<p id="count"></p>

來源

2017-05-08 10:38:15

雖然這確實將一些代碼轉換爲jQuery，但主體仍然是純js。 – George

當使用jQuery時，爲什麼要做這麼多的代碼。不必要的 –

@Gerge，小姐明白......我只是想表明如何從jquery調用函數。 –

$('#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>

請檢查代碼可能會幫助你感謝

來源

2017-05-08 10:39:32

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

回答

相關問題