참고 : http://stackoverflow.com/questions/1275383/jquery-remove-select-options-based-on-another-select-selected-need-support-for
|
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#sel1').on('change', function() {
var val = this.value;
if(val) {
$.ajax({
url:val + '.xml',
type:'POST',
dataType:'xml',
success:function(xml) {
var sel2 = $('#sel2');
$('option', sel2).each(function(i) {
if(i > 0) {
$(this).remove();
}
});
$(xml).find('list data').each(function() {
sel2.append(
$('<option>').text($(this).text()).val($(this).text())
);
});
},
error:function() {
alert('error');
}
});
} else {
// selectbox 모두 비우기 $(select).empty();
var sel2 = $('#sel2');
$('option', sel2).each(function(i) {
if(i > 0) {
$(this).remove();
}
});
}
});
});
</script>
</head>
<body>
<select id="sel1" name="sel1">
<option value="">전체</option>
<option value="korea">대한민국</option>
<option value="usa">미국</option>
</select>
<select id="sel2" name="sel2">
<option value="">전체</option>
</select>
</body>
</html> |
<?xml version="1.0" encoding="UTF-8" ?>
<list>
<data>korea1</data>
<data>korea2</data>
</list> |
<?xml version="1.0" encoding="UTF-8" ?>
<list>
<data>usa1</data>
<data>usa2</data>
<data>usa3</data>
</list> |