0
我有一个很多领域的表格,但我有两个选择,一个选择国家,一个选择我选择的国家的城市。AJAX,Django和HTML选择?
我想这样做:当我在第一个选择中选择国家时,我想更改第二个选择的城市,并通过我选择的contry的ID进行过滤。
这里是我的Models.py
class country(models.Model):
country_name = models.CharField(max_length=264)
def __str__(self):
return self.country_name
class country_cities(models.Model):
city_name = models.CharField(max_length=264)
country = models.ForeignKey(country)
def __str__(self):
return self.city_name
,这里是我的HTML表单:
<form method="post">
<input type="text" name="username">
<select name="country" onchange="listCities()">
{% for country in countrylist %}
<option value="{{ country.id }}">{{ country.country_name }}</option>
{% endor %}
</select>
<select name="city" id="citylist">
<!--HERE IS WHERE I WANT TO LIST JUST THE CITIES OF THE COUNTRY THAT I SELECTED-->
</select>
</form>
如何让我的观点,我有什么库在我的views.py导入?另外我不确定我的AJAX库或我的脚本是否正确。
AJAX:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
SCRIPT:
<script type="text/javascript">
function listCities()
{
var countryid = $("[name='country']").val();
$('#citylist').html('');
$.ajax({
type: "POST",
data: "countryid="+countryid,
url: "editprofile/",
success: function(result)
{
var resultObj = JSON.parse(result);
var dataHandler = $("#citylist");
$.each(resultObj, function(key, val)
{
var newRow = $('<option value="'+val.id+'">');
newRow.html(' '+val.city_name +'');
dataHandler.append(newRow);
});
}
});
}
</script>
而不是做一个Ajax调用,你有没有考虑让所有的城市加载客户端在json对象中,并使用普通的javascript来改变你的第二选择的选项? – DragonBobZ
这是一个小提琴https://jsfiddle.net/q4np1169/看起来如何。 (使用jQuery,而不是普通的js) – DragonBobZ