我有一些如下代码。我想要这样，当我在“选择 1”中选择一个项目时，它会更改第二个组合框中的 ，但我不确定最好的方法。必须是 AJax 还是可以只用 Javascript 来完成？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="select1">Select 1</label>
<select name="select1" id="select1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
</select>
</p>
<p>
<label for="Select2">Select 2</label>
<select name="Select2" id="Select2">
<option>List 1</option>
<option>List 2</option>
<option>List 3</option>
</select>
</p>
</form>
</body>
</html>
如有任何提示，我们将不胜感激。汤姆
最佳答案
这里:
<html>
<head>
<!-- Connect jQuery from Google library storage -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Create select for class, with id #class -->
<select id="class" name="class">
<option value="0">Econom</option>
<option value="1">Business</option>
<option value="2">First</option>
</select>
<!-- Create select for place, with id #place -->
<select id="place" name="place" disabled="disabled"></select>
<!-- Create view place for price, with id #price -->
<span id="price"></span>
<script type="text/javascript">
// available places to choose
var available = {
0: {
25: 50
},
1: {
26: 100
},
2: {
21: 200,
},
}
// When the document is totally loaded, do that things that's defined in function(e) {}
$(document).ready(function(e){
// Bind trigger for class select changing, where $('select#class') - find element that in DOM select inputs and has id="class"
// When it change, call function(e) {}, inside this function $(this) will be the select itself
$('select#class').live('change', function(e){
// find place select input
var place = $('select#place');
// if it's disabled, unblock it, and clean all options inside
place.removeAttr('disabled').find('option').remove();
// foreach places in available create option and put it into place select
for (var i in available[$(this).val()]) {
place.append($('<option />').val(i).html(i));
}
// behave like place select have changed, and trigger listener above
place.change();
});
$('select#place').live('change', function(e){
$('span#price').html(available[$('select#class').val()][$(this).val()]);
});
});
</script>
</body>
</html>
完全有效的示例。 不知怎的，就是这样。
关于javascript - 通过在第一个组合框中进行选择来更改组合框中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8839723/