表示フォーム要素が互いに干渉するためのチェック値

Question

私は、ある特定の値が選択されている選択ボックスがあり、別のフィールドが表示されています。

私はjavascriptに関する知識がなく、このコードをどこかから取得しました。 私は同じ形式で複数の場所にこのjavascriptを持っています。しかし、私のスクリプトは1つの入力に対してのみ機能します。他の選択ボックスから別のものを選択すると、前の入力の値が閉じてしまいます。あなたがコードを見れば、これはよく分かります。

あなたが問題をチェックすることができますリンク： jsfiddle

Javascriptを：

function checkvalue(val) { 
 
    if (val === "NewSale") 
 
    document.getElementById('actualamt').style.display = 'block'; 
 
    else 
 
    document.getElementById('actualamt').style.display = 'none'; 
 

 
    if (val === "SchoolWearAccessories") 
 
    document.getElementById('schoolwear').style.display = 'block'; 
 
    else 
 
    document.getElementById('schoolwear').style.display = 'none'; 
 
}

<form> 
 
    Product Category: 
 
    <select name="category" required onchange='checkvalue(this.value)'> 
 
    <option value="">Select Product Category</option> 
 
    <option value="School Uniforms">School Uniforms</option> 
 
    <option value="SchoolWearAccessories">School Wear Accessories</option> 
 
    <option value="Hospital Uniforms">Hospital Uniforms</option> 
 
    <option value="Corporate Uniforms">Corporate Uniforms</option> 
 
    <option value="Industrial Uniforms">Industrial Uniforms</option> 
 
    </select> 
 

 
    <div id="schoolwear" style="display:none;"> 
 
    Sub Category: 
 
    <select name="subcategory"> 
 
    <option value="">Select Product Category</option> 
 
    <option value="Uniform Sweaters">Uniform Sweaters</option> 
 
    <option value="School Belts">School Belts</option> 
 
    <option value="School Ties">School Ties</option> 
 
    <option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option> 
 
    <option value="School Caps">School Caps</option> 
 
    <option value="School Bags">School Bags</option> 
 
    </select> 
 
    </div> 
 

 
    Tag: 
 
    <select name="producttag" onchange='checkvalue(this.value)'> 
 
    <option value="">None</option> 
 
    <option value="New">New</option> 
 
    <option value="Sale">Sale</option> 
 
    <option value="NewSale">New and Sale</option> 
 
    </select> 
 

 
    <div id="actualamt" style="display:none;"> 
 
    Actual Amount: 
 
    <input type="number" name="actualamt" step="any" /> 
 
    </div> 
 
</form>

にヘルプが理解されるであろう。

Answer 1

あなたがそれらの両方が選択に表示させたい場合は、単にあなたがそれぞれに異なる機能がのonchangeイベントを選択する必要があります。この

function checkvalue(val) { 
 
if (val === "SchoolWearAccessories") 
 
    document.getElementById('schoolwear').style.display = 'block'; 
 
    else 
 
    document.getElementById('schoolwear').style.display = 'none'; 
 
} 
 

 
function checkvalue1(val) { 
 
    if (val === "NewSale") 
 
    document.getElementById('actualamt').style.display = 'block'; 
 
    else 
 
    document.getElementById('actualamt').style.display = 'none'; 
 
}

<form> 
 
    Product Category: 
 
    <select name="category" required onchange='checkvalue(this.value)'> 
 
    <option value="">Select Product Category</option> 
 
    <option value="School Uniforms">School Uniforms</option> 
 
    <option value="SchoolWearAccessories">School Wear Accessories</option> 
 
    <option value="Hospital Uniforms">Hospital Uniforms</option> 
 
    <option value="Corporate Uniforms">Corporate Uniforms</option> 
 
    <option value="Industrial Uniforms">Industrial Uniforms</option> 
 
    </select> 
 

 
    <div id="schoolwear" style="display:none;"> 
 
    Sub Category: 
 
    <select name="subcategory"> 
 
    <option value="">Select Product Category</option> 
 
    <option value="Uniform Sweaters">Uniform Sweaters</option> 
 
    <option value="School Belts">School Belts</option> 
 
    <option value="School Ties">School Ties</option> 
 
    <option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option> 
 
    <option value="School Caps">School Caps</option> 
 
    <option value="School Bags">School Bags</option> 
 
    </select> 
 
    </div> 
 

 
    Tag: 
 
    <select name="producttag" onchange='checkvalue1(this.value)'> 
 
    <option value="">None</option> 
 
    <option value="New">New</option> 
 
    <option value="Sale">Sale</option> 
 
    <option value="NewSale">New and Sale</option> 
 
    </select> 
 

 
    <div id="actualamt" style="display:none;"> 
 
    Actual Amount: 
 
    <input type="number" name="actualamt" step="any" /> 
 
    </div> 
 
</form>

Answer 2

のような二つの異なるonchange関数を使用します。 私が受け入れてあなたが答えをupvoteまたはマークすることができ、更新フィドル

https://jsfiddle.net/6hheckao/1/