使用JS连接DropDown中的值时出错



我已经编写了HTML和JS,用于连接下拉列表中的值。但我无法从中得到结果。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$(".country",'.state').on('change',function(){
var selectedCountry = $(".country").find("option:selected").val();
var selectedState = $(".state").find("option:selected").val();
document.getElementById('demo').innerHTML= selectedCountry + " " + selectedState;
});
});
</script>
</head> 
<body>
<form>
<label>Select Country:</label>
<select class="country">
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
<select class="state">
<option value="Washington">Washington</option>
<option value='New Delhi'>New Delhi</option>
<option value='London'>London</option>
</select>
</form>
<p id="demo"></p>
</body>
</html>

Eventhandler的选择器不正确,您可以通过$(selectboxSelector(.val((轻松获取select box的值。
$(document).ready(function(){
$('.country, .state').on('change',function(){
var selectedCountry = $(".country").val();
var selectedState = $(".state").val();
$('#demo').html( selectedCountry + " " + selectedState );
});
});

最新更新