Question

我试图点击下拉菜单项显示隐藏的元素（用CSS隐藏）。点击下拉列表时，有3个项目。一个是向用户显示它是必填字段。另外两个是主要项目。

对此有任何帮助将非常感激！

这是JSfiddle：link

HTML

<p>
<label for="service"><b>Service Type</b></label> <br id="resBr" /> 
    <select name="service" id="service">
        <option value="null">Required</option>
        <option onclick="show(1)" value="airTransfer">Airport Transfer</option>
        <option onclick="show(2)" value="hourly">Hourly</option>
    </select>
</p>

<div id="content1" class="content" hidden>
    <p>
        <label for="airline"><b>Airline</b></label> <br id="resBr" /> <input type="text" name="airline" id="airline"> <br id="resBr" /><br id="resBr" />
        <label for="flight"><b>Flight Number</b></label> <br id="resBr" /> <input type="text" name="flight" id="flight"> <br id="resBr" /><br id="resBr" />
        <label for="landing"><b>Landing Time</b></label> <br id="resBr" /> <input type="text" name="landing" id="landing">
    </p>
</div>

<div>
    <p id="content2" class="content" hidden>
        <label for="occasion"><b>Occasion</b></label> <br id="resBr" /> <input type="text" name="occasion" id="occasion"> <br id="resBr" /><br id="resBr" />
        <label for="start"><b>Pickup Time</b></label> <br id="resBr" /> <input type="text" name="start" id="start"> <br id="resBr" /><br id="resBr" />
        <label for="end"><b>Drop Off Time</b></label> <br id="resBr" /> <input type="text" name="end" id="end"><br id="resBr" /><br id="resBr" />
        <label for="pickup"><b>Pickup Address</b></label> <br id="resBr" /> <input type="text" name="pickup" id="pickup"><br id="resBr" /><br id="resBr" />
        <label for="hours"><b>Total Hours</b></label> <br id="resBr" /> <input type="text" name="hours" id="hours">
    </p>
</div>



CSS

#content1 {
     color: blue;
}

#content2 {
    color: green;
}

.hidden {
    display: none;
}



JS

function show(id) {
var allDivs = document.getElementsByClassName('content');
for (var i = 0; i < allDivs.length; i+){
    allDivs[i].classList.add('hidden');
}
document.getElementById('content' + id).classList.remove('hidden');
}

Answer 1

让我们从Html错误开始：

你希望<div id="content1" class="content hidden">隐藏在引号的旁边。

接下来要在for循环中i++而不是i +的语法错误。

小提琴：http://jsfiddle.net/kfnkp6nn/1/

这将使它基本上正常工作，但它不能使用键盘输入，因为你想要onchange元素使用select事件，而不是click对于选项。

HTML

<select name="service" id="service" onchange="show(this.selectedIndex)">

的Javascript

function show(idx) {
  //There are a few ways to do this, I'm using the 
  //Selected index to show/hide. 
  //YOu could use if/else statements or swich based on selected value

  var allDivs = document.getElementsByClassName('content');
  for (var i = 0; i < allDivs.length; i++) {
    allDivs[i].classList.add('hidden');
  }
  document.getElementById('content' + idx).classList.remove('hidden');
}

＆＃13;

function show(idx) {
  //There are a few ways to do this, I'm using the 
  //Selected index to show/hide. 
  //YOu could use if/else statements or swich based on selected value

  var allDivs = document.getElementsByClassName('content');
  for (var i = 0; i < allDivs.length; i++) {
    allDivs[i].classList.add('hidden');
  }
  document.getElementById('content' + idx).classList.remove('hidden');
}

＆＃13;

#content1 {
  color: blue;
}
#content2 {
  color: green;
}
.hidden {
  display: none;
}
.content label {
  font-weight: bold;
  display: block;
}
.content input {
  margin-bottom: 2em;
}

＆＃13;

<p>
  <label for="service"><b>Service Type</b>
  </label>
  <br id="resBr" />
  <select name="service" id="service" onchange="show(this.selectedIndex)">
    <option value="null">Required</option>
    <option value="airTransfer">Airport Transfer</option>
    <option value="hourly">Hourly</option>
  </select>
</p>

<div id="content1" class="content hidden">
  <p>
    <label for="airline">Airline</label>
    <input type="text" name="airline" id="airline">
    <label for="flight">Flight Number</label>
    <input type="text" name="flight" id="flight">
    <label for="landing">Landing Time</label>
    <input type="text" name="landing" id="landing">
  </p>
</div>

<div>
  <p id="content2" class="content hidden">
    <label for="occasion">Occasion</label>
    <input type="text" name="occasion" id="occasion">
    <label for="start">Pickup Time</label>
    <input type="text" name="start" id="start">
    <label for="end">Drop Off Time</label>
    <input type="text" name="end" id="end">
    <label for="pickup">Pickup Address</label>
    <input type="text" name="pickup" id="pickup">
    <label for="hours">Total Hours</label>
    <br id="resBr" />
    <input type="text" name="hours" id="hours">
  </p>
</div>

＆＃13;

在上面的代码片段中，我自由地整理了您的HTML，您不需要b或br标记，这一切都可以通过CSS完成。

使用CSS隐藏元素并在单击后使用Javascript显示

1 个答案: