Question

我的Javascript功能检查单选按钮选择并显示相应的下拉框。但是这段代码不是通用的，我尝试使用＆＃34;这个＆＃34;但它没有帮助..这实际上是通用的吗？

CODE：

function change(s)
{
if(document.getElementById("viewstate").checked==true)
{
    document.getElementById("state").style.display="inline";
    document.getElementById("cat").style.display="none";
}
else
{
    document.getElementById("state").style.display="none";
    if(document.getElementById("viewcat").checked==true)
    {
        document.getElementById("cat").style.display="inline";
    }
    else
        document.getElementById("cat").style.display="none";
}
}

前端单选按钮

<input type="radio" name="viewrecord" value="viewstate" onchange="change('state')" required="" id="viewstate"> View by State

<select name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>

<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat')" id="viewcat">View By Agency
<select id="cat" name="che" style="display:none" required="">

Answer 1

您可以尝试使用此代码段

JS

      document.addEventListener('click',function(event){
       var tar = event.target.id;
        if(tar ==="viewstate"){
           document.getElementById("state").style.display="inline";
           document.getElementById("cat").style.display="none";
        }
        else if(tar==="viewcat"){
           document.getElementById("state").style.display="none";
           document.getElementById("cat").style.display="inline";

        }
    },false)

WORKING COPY

我还尝试了什么？

我的主要想法是为下一个选择标记添加一个类。例如，如果您选择radio#viewstate，它将向最近的选择元素添加一个类。然后循环遍历所有选择标记，无论谁没有这个类，隐藏它们。但是，由于您使用display:none nextSibling将无法正常工作。为什么nextSibling无法工作，您可以查看它之间的区别visibility:hidden

在演示中还要注意我使用了带有输入的label标记

Answer 2

如果通用你的意思是让函数能够适用于任何类似的选择过程而不依赖于选择输入的硬编码值，这是我想到的一种方式：

function change(selectorId, selectorClass) {
  // Get all the selector elements you use.
  var rS = document.getElementsByClassName( selectorClass );

  // Out of the elements you fetched above, make the one with
  // id = selectorId visible, rest hidden.
  for(var i = 0; i < rS.length; ++i)
   rS[i].style.display = (rS[i].id == selectorId) ? "inline" : "none";
}

在HTML部分中，为要与无线电值一起使用的每个选择输入添加一个类：

<input type="radio" name="viewrecord" value="viewstate" onchange="change('state', 'record-selector')" required="" id="viewstate"> View by State

<select class='record-selector' name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>

<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat', 'record-selector')" id="viewcat">View By Agency
<select class='record-selector' id="cat" name="che" style="display:none" required="">

使用此功能，您可以在不同的表单上使用相同的功能进行类似的选择过程。

我如何使我的onchange功能通用？

2 个答案: