如何在不使用按钮的情况下从列表中进行选择后显示要显示的值。我试图为选择列表实现onChange事件,并取消按钮,但我无法让它工作。在选择了选项(a,b,c)后,我希望在选择框下面显示值(1,2,3)。
<script>
function displayResult() {
this.nextSibling.nodeValue = document.getElementById("mySelect").value;
}
</script>
<body>
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
答案 0 :(得分:0)
使用jQuery:
$('#mySelect').change(function(){
//do stuff
})
答案 1 :(得分:0)
如果您使用的是JQuery,可以这样做:
HTML:
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<div id="myDiv"></div>
</form>
JS:
$(document).ready(function() {
$('#mySelect').on('change', function () {
$('#myDiv').html(this.value);
});
});
答案 2 :(得分:0)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function(){
$('#mySelect').on('change', function(){
console.log($('#mySelect').find('option:selected').attr('value'));
})
});
</script>
</head>
<body>`enter code here`
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>`enter code here`
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
</body>
</html>
pls try this