Question

我有一个选择框，其中选择了一个特定值，另一个字段显示出来。

我不了解javascript并从某个地方获取此代码。我在同一个表单的多个地方有这个javascript。但是，我的脚本只能在一个输入上工作。如果我从另一个选择框中选择另一个，则前一个输入的值关闭，这是我不想要的。如果您看到代码，这将很好理解。

您可以查看问题的链接： 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函数

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

每个select onchange事件都应该有不同的功能。我已将该函数重命名为checkvalueProductTag() and checkvalueCategory()

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

检查更新的小提琴

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

显示形式元素的检查值相互干扰

2 个答案: