将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 - 选择选项列表

回答

相关问题