将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>
通过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>
是的,我会将您链接到我上传的合法网站。 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();
// ...
});
});
我已在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>
虽然这确实将一些代码转换为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>
请检查代码可能会帮助你 感谢
jQuery很容易理解,现在你似乎正在努力使用[selector](https://www.w3schools.com/jquery/jquery_ref_selectors.asp)。什么'document.getElementById(“countryChooser”)'做的是在HTML中找到一个id为_countryChooser_的元素,用jQuery代码替换这个元素,你需要做'$(“#countryChooser”)'并且得到值可以使用'.val()'PS你的代码可能更适合使用'switch',如果这是你所有的代码,变量'message'是毫无意义的,我希望这有助于。 – George