我为品牌和型号设置了从属下拉列表。 Javascript用于检测Make上的更改,然后从Model中过滤/填充Model下拉列表。这似乎运作良好。
我需要child下拉值,然后在另一个通过视图创建的html页面上执行广告资源搜索。我不是传递子值,而是始终返回父值。这意味着我可以使用品牌生成搜索/过滤器,但不能根据需要使用模型。 我已经尝试了许多请求组合和更改下拉菜单,以及尝试通过隐藏变量来获取Java脚本变量来代替通过name属性.....来下拉下拉菜单的方法,到目前为止没有成功。 真的需要一些指导。
索引-呈现下拉值
{% extends "app/layout.html" %}
{% block content %}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<script>
$(document).ready(function()
{
var $makevar = $("#makeddl");
$modelvar = $("#modelddl");
$options = $modelvar.find('option');
$makevar.on('change',function()
{
$modelvar.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');
});
</script>
<script type="text/javascript">
function getOption() {
selectElement = document.querySelector('#modelddl');
var $modelval = selectElement.value;
};
</script>
</head>
<div class="container">
<div class="jumbotron" style="background-image: url(https://t4.ftcdn.net/jpg/02/59/17/83/240_F_259178343_D9wu1JKg49PF0nywVuY7K27I0bMgt7hx.jpg); background-size: 100% 110%;">
<h3 style ="color:midnightblue; text-align:left; font-family:verdana">
Take the hassle ...
<br>
out of the haggle ...
</br>
</h3>
<p color:white;"></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h2>Browse the Showroom</h2>
<p>Choose a make, model and a county to get started</p>
{#<! -- Drop Downs -->#}
<form action = "{% url 'search_results'%}" enctype="multipart/form-data" method="get">
<label for="makeddl">Choose Make</label>
{<select id="makeddl" name="makeselection">
<option disabled selected="true">Choose Make</option>
{% for makes in MotorMakesView %}
<option value ="{{ makes.MotorMakeName}}"> {{ makes.MotorMakeName }} </option>
{% endfor %}
</select>
<br><br>
<label for="modelddl">Choose Model</label>
<select id="modelddl" name="modelselection">
<option disabled selected ="True">\Choose Model</option>
{% for mods in MotorModelsView %}
<option value= "{{ mods.MotorMakeName}}"> {{ mods.MotorModelName}} </option>
{% endfor %}
</select>}
<br><br>
<label for="countyddl">Choose County</label>
<select type>
<option>County</option>
{% for result in County %}
<option>{{result.CountyName}}</option>
{% endfor %}
</select>
<br><br>
<input type="hidden" name="modelval" value=""/>
{#<! -- Submit Button -->#}
<input type="submit" class="btn btn-default" value="Search »" » />
{% csrf_token %}
</form>
</div>
<div class="col-md-4">
<h2>Estimate Trade-in Value</h2>
<p>Estimate the trade in value fo your car before speaking with the dealer.</p>
<p><a class="btn btn-default" href="https://www.myvehicle.ie/faq/can-you-tell-me-what-the-true-value-of-the-car-is/">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Arrange a Loan</h2>
<p>Apply for a loan with our partner ....</p>
<p><a class="btn btn-default" href="https://carloans4u.ie/?gclid=CjwKCAjw57b3BRBlEiwA1ImytlZI9xjld1wY7n1ln6gERfjTCtwyXoBzj_6p-41pq7UxgDkY16ChVRoC2TUQAvD_BwE">Learn more »</a></p>
</div>
</div>
{% endblock %}
search_results模板
{% extends "app/layout.html" %}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
{% block content %}
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<title>Search Results</title>
</head>
<body>
<h1><Strong>Here are your deals;</Strong></h1>
<p>
</p>
<table class= "table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Garage ID</th>
<th scope="col">Model</th>
<th scope="col">Make</th>
<th scope="col">Title</th>
<th scope="col">Year</th>
<th scope="col">Body</th>
<th scope="col">Offer Price</th>
<th scope="col">RRP</th>
</tr>
</thead>
{% for inv in GarageInventoryView %}
<tbody class = "table table-hover">
<tr>
<td>{{inv.GarageID}}</td>
<td>{{inv.ListModel}}</td>
<td>{{inv.ListMake}}</td>
<td>{{inv.Title}}</td>
<td>{{inv.Year}}</td>
<td>{{inv.BodyType}}</td>
<td>{{inv.GaragePrice}}</td>
{% for mods in MotorDetailsView %}
<td>{{ mods.id}}> {{ mods.RRP}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
{% endblock %}
Views.py
def SearchInventory(request):
if request.method=='GET':
inputvalue = request.GET['modelselection']
print(inputvalue)
displayInventory = GarageInventory.objects.all().filter(ListModel=inputvalue)
else:
displayInventory = GarageInventory.objects.all()
return render(request, 'search_results.html', {'GarageInventoryView':displayInventory})
URLs.py
path('', views.home, name='home'),
url(r'^search_results/$', views.SearchInventory, name ='search_results'),