当某些选项不可见时,定位单选按钮选项

时间:2017-10-05 13:07:28

标签: javascript

我有4个单选按钮,但根据您选择的下拉列表会影响要显示的内容。我的问题是如何让它们在同一个地方展示。例如,当前两个出现时它看起来很棒,但是当第二个出现时它们显示出一个空格,好像前两个仍然只有看不见。所以无论两个节目如何,我都希望它们处于相同的位置。

以下是我正在使用的一些代码。

HTML:

<div id="rdtrue" style="float: left; padding-left:10px; text-align:left; vertical-align:text-top;">

  <input type="radio" class="classRt classLR" name="requestType" id="rdNew" value="New">
  <label for="rdNew" class="classRt classLR">New</label><br>

  <input type="radio" class="classRt classLR" name="requestType" id="rdSecond" value="Existing">
  <label for="rdSecond" class="classRt classLR">Second</label><br>

  <input type="radio" class="classRt classInv" name="requestType" id="tdVW" value="Paper">
  <label for="rdVW" class="classRt classInv">VW</label><br>

  <input type="radio" class="classRt classInv" name="requestType" id="rdFord" value="Plastic">
  <label for="rdFord" class="classRt classInv">Ford</label><br>

</div>

<select id="ddlRequestType" onchange="GetChoice(this.value);">
  <option value="MISSING" selected>Select</option>
  <option value="Inventory">Inventory</option>
  <option value="Letter">Letter</option>
  <option value="Report">Report</option>
</select>

使用Javascript:

function hideClass(val) {
  var cls = document.getElementsByClassName(val);
  var i;
  for (i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
  }
}

function showClass(val) {
  var cls = document.getElementsByClassName(val);
  var i;
  for (i = 0; i < cls.length; i++) {
    cls[i].style.display = 'inline';
  }
}

0 个答案:

没有答案