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

Question

我想知道是否有可能在您选择一个类别时，所选择的选项将确定其后的文本框。 因此，在下面的示例中，如果有人选择手提包，他们会被询问手提包类型，反之亦然。

我知道这可能需要JQuery，但我对此并不十分熟练，因此我发现的解决方案仅更改了单个框的数据。 如果我希望能够实现，请告诉我。

谢谢！ :)

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

<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 />

<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 />

Answer 1

您可以稍微更改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';
}