javascript - 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';
}