通过选择在第一个组合框中更改组合框值 [英] Change values in combo box by selection in first combo box
本文介绍了通过选择在第一个组合框中更改组合框值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些code如下所示。我希望它这样，当我选择了一个项目选择1它改变了在第二个组合框，但我不知道的去了解它的最佳方式。它必须是AJAX，也可以将其与刚刚的Javascript做什么？
I've got some code like the following. I want it so that when I chose an item in 'select 1' it changes the in the second combo box but I'm not sure of the best way to go about it. Does it have to be AJax or can it be done with just 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>
任何提示将AP preciated。汤姆
Any tips would be appreciated. Tom
推荐答案
下面：
<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>
完全工作的例子。
不知怎的如此。
Totally working example. Somehow like that.
这篇关于通过选择在第一个组合框中更改组合框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
