英文:
How do I create a HTML form select with sub select
问题
我需要在表单上创建一些子选择。因此，当您悬停/单击选项时，会出现一个子集，例如。
Lorry|
Car|Saloon
|Coupe
|Estate
Van|
我知道我们可以创建一个下拉菜单，但我不知道如何将选择包含在表单提交中。
我不熟悉jQuery，但精通JavaScript和PHP。
如果使用无序列表以及一些CSS和JavaScript，我可以获得想要的效果，但不知道如何记录所选的值，而不使用。
英文:
I have a need to create some sub selects on a form. So when you hover/click on the option a subset appears eg.
Lorry|
Car|Saloon
|Coupe
|Estate
Van|
I know we can create a menu dropdown but I don't know how the selection could be included in the form POST
I am not familiar with jQuery but proficient with JavaScript and PHP
If used unordered list with some css and java script I can get the effect I want but don't know how to record the value select with out using <a href="">
<form method="POST" action="#"> <ul>
<li ><a href="#" >Lorry</a> </li>
<li ><a href="#" >Car</a>
<ul>
<li><a href="#">Saloon</a> </li>
<li><a href="#">Coupe</a>
<li><a href="#">Estate</a>
</li>
</ul>
</li>
<li ><a href="" >Van</a>
<ul>
<li><a href="#">Basic</a> </li>
<li><a href="#">Luton</a> <ul>
<li><a href="#">Low Loader</a> </li>
<li><a href="#">Tail lift</a> </li>
</ul>
</li>
<li><a href="#">Transit</a> </li>
</ul>
</li>
</ul>
<input type="text" name="Vehicle" id="Vehicle" hidden>
</form>
答案1
得分: 2
以下是代码的中文翻译：
类似这样的方式可以节省一些空间，然后您可以将类别值添加到选项中以指示类别。
<div class="custom-select" style="width:200px;">
<form action="#">
<select>
<option value="0">选择汽车：</option>
<optgroup label="汽车" data-max-options="2">
<option value="1">轿车</option>
<option value="2">轿跑车</option>
<option value="3">旅行车</option>
</optgroup>
<optgroup label="货车" data-max-options="2">
<option value="6">Astrovan</option>
<option value="7">Windstar</option>
<option value="8">Pacifica</option>
</optgroup>
</select>
</form>
</div>
您可以在此链接查看原始代码：https://jsfiddle.net/jasonbruce/L6nc9rwh/1/
英文:
Something like this could save some space, then you could add the category values to your options to indicate the category.
<div class="custom-select" style="width:200px;">
<form action="#">
<select>
<option value="0">Select car:</option>
<optgroup label="Car" data-max-options="2">
<option value="1">Saloon</option>
<option value="2">Coupe</option>
<option value="3">Estate</option>
<optgroup label="Van" data-max-options="2">
<option value="6">Astrovan</option>
<option value="7">Windstar</option>
<option value="8">Pacifica</option>
</select>
</form>
</div>
答案2
得分: 1
一个你可以做的事情是创建另一个选择器（在第一个选择器之外），并让它根据第一个选择器的值动态调整。你可以通过在第一个选择器上添加事件监听器来实现这一点：
const vehicleTypeSelector = document.getElementById('vehicleTypeSelector');
vehicleTypeSelector.addEventListener('change', (event) => updateValuesOtherSelector());
这是一种你可以解决这个问题的方法。我不知道是否可以在原始的HTML中实现这一点。
英文:
One thing you can do is make another select (outside of the first one) and let it dynamically adjust to the value of the first select. You can do this by adding on eventlistener to the first select:
const vechicleTypeSelector = document.getElementById('vechicleTypeSelector')
vechicleTypeSelector.addEventListener('change', (event) => updateValuesOtherSelector())
This is one way you can solve it. I don't know if it is possible in raw HTML.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论