Javascript HTML使用select表单更改输入选择（可能使用JQuery？）

我想知道，当你选择一个类别时，你选择的选项是否会决定它后面的文本框。所以在我下面给出的例子中，如果有人选择手提包，他们会被问到手提包类型，反之亦然，问鞋子和高跟鞋

我知道这可能需要JQuery，但我不是很精通，所以我找到的解决方案只改变了单个框的数据。如果我希望实现的目标能够实现，请告诉我

谢谢！：）

类别：
手提包
鞋
手提包类型：



手提包尺寸：



鞋型：



鞋跟高度：

您可以稍微更改HTML，将手提包和鞋子的部件分别分组，如下所示：

Category:
<select name="category" form="sku" id=myselect>
    <option value="Handbags">Handbags</option>
    <option value="Shoes">Shoes</option>
</select>

<div class='Handbags input-sections'>
    <p>Handbag Type:</p>
    <input type="text" name="type" placeholder="Example: Tote"><br />

    <p>Handbag Size:</p>
    <input type="text" name="type" placeholder="Example: Large"><br />
</div>

<div class='Shoes input-sections'>

    <p>Shoes Type:</p>
    <input type="text" name="type" placeholder="Example: Heel"><br />

    <p>Heel height:</p>
    <input type="text" name="type" placeholder='Example: 4.5"'><br />
</div>

类别：
手提包
鞋
手提包类型：



手提包尺寸：



鞋型：



鞋跟高度：

然后使用普通javascript根据所选内容显示和隐藏部分

例如：

var select = document.getElementById('myselect');
select.onchange=function(){
    // Hide all sections
    var sections = document.getElementsByClassName('input-sections');
    for(var i=0;i<sections.length;i++)
        sections[i].style.display='none';

    // Show the section that was chosen
    document.getElementsByClassName(this.value)[0].style.display='block';
}

var select=document.getElementById（'myselect'）；
select.onchange=function（）{
//隐藏所有部分
var sections=document.getElementsByClassName（'input-sections'）；
对于（var i=0；iyes很可能显示您到目前为止所做的尝试：）如果您将
组像
一样包装在一个包装器元素中，并为每个div提供一个可供引用的ID，那么您的生活会更轻松。
var select = document.getElementById('myselect');
select.onchange=function(){
    // Hide all sections
    var sections = document.getElementsByClassName('input-sections');
    for(var i=0;i<sections.length;i++)
        sections[i].style.display='none';

    // Show the section that was chosen
    document.getElementsByClassName(this.value)[0].style.display='block';
}