在特定选择上显示单选按钮

时间：2018-12-11 16:31:59

标签： javascript html css

如何使选择内容显示我的选择，并基于该选择显示或隐藏单选按钮选择。

function myFunction() {
    var x = document.getElementById("elevator");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<div class="form-group col-sm-2">
  <label for="selectfloor">Select Floor</label>
  <select class="form-control" onchange="myFunction()">
      <option>Stue (Ground Floor)</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
  </select>
</div>
<div class="col-sm-3" id="elevator">
  Is there an elevator?
  <div class="radio">
      <label><input type="radio">Yes</label>
  </div>
  <div class="radio">
      <label><input type="radio">No</label>
  </div>
            </div>

我尝试了onSelect，但是它没有任何作用，据我了解，一旦选择了myFuction选项，单选按钮应该会出现。我还隐藏了单选按钮的div来隐藏它们，以便在我选择某个选项后它们可以出现。任何解决方案都会有所帮助。

6 个答案:

答案 0 :(得分：0)

而不是onclick每个选项，而是对选择本身进行onChange。

function myFunction() {
  x =this;
  if (isNaN(x.value)) {

    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

答案 1 :(得分：0)

您可以将事件附加在 select 元素中，而不是 option 中。另外，您还必须将事件从 onclick 更改为 onchange 。

尝试以下方式：

function myFunction(el){
  var elevator = document.getElementById('elevator');
  if(el.value == "Stue (Ground Floor)")
    elevator.style.display = "none";
  else
    elevator.style.display = "block";
}
<div class="form-group col-sm-2">
  <label for="selectfloor">Select Floor</label>
  <select class="form-control" onchange="myFunction(this)">
      <option>Stue (Ground Floor)</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
  </select>
</div>
<div class="col-sm-3" id="elevator" hidden>
  Is there an elevator?
  <div class="radio">
      <label><input name="rad" type="radio" id="yes">Yes</label>
  </div>
  <div class="radio">
      <label><input name="rad" type="radio" id="no">No</label>
  </div>
</div>

答案 2 :(得分：0)

option标签上没有oncklick handlers，因此请在select标签上使用onchange。 并检查值是否为NaN（不是数字）

function myFunction(option) {
  var x = document.getElementById("elevator");
  // if option value is Not a Number
  if (isNaN(option.value)) {

    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<div class="form-group col-sm-2">
  <label for="selectfloor">Select Floor</label>
  <select class="form-control" onchange="myFunction(this)">
    <option>Stue (Ground Floor)</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
</div>
<div class="col-sm-3" id="elevator" hidden>
  Is there an elevator?
  <div class="radio">
    <label><input type="radio">Yes</label>
  </div>
  <div class="radio">
    <label><input type="radio">No</label>
  </div>
</div>

答案 3 :(得分：0)

尝试一下：

function myFunction(selected) {

  var x = document.getElementById("elevator");

  if (selected.value == "Stue (Ground Floor)") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<div class="form-group col-sm-2">
  <label for="selectfloor">Select Floor</label>

  <select class="form-control" onchange="myFunction(this)">
    <option>Stue (Ground Floor)</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
  </select>
</div>
<div class="col-sm-3" id="elevator" hidden>
  Is there an elevator?
  <div class="radio">
    <label><input type="radio">Yes</label>
  </div>
  <div class="radio">
    <label><input type="radio">No</label>
  </div>
</div>

答案 4 :(得分：0)

以下代码可能会对您有所帮助。使用onChange可以调用一个函数，该函数获取选择的索引并使用它显示单选按钮。我已经使用css的“ display”属性来隐藏/取消隐藏单选按钮。请记住，用于单个选择的单选按钮的名称应相同。在这种情况下，我正在检查是否有多个楼层显示单选按钮。 

 <form>
        <label for="selectfloor">Select Floor</label>
          <select id="selectfloor" onchange="myFunction()">
                            <option>Stue (Ground Floor)</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
          </select>
        </form>

        <p id="display"></p>

                <div class="col-sm-3" style="display:none" id="elevator">
                    Is there an elevator?
                    <div class="radio">
                        <label><input name="elevatorAvailable" type="radio">Yes</label>
                    </div>
                    <div class="radio">
                        <label><input  name="elevatorAvailable" type="radio">No</label>
                    </div>
                </div>

        <script>
        function myFunction() {
            var x = document.getElementById("selectfloor");
            var i = x.selectedIndex;
            document.getElementById("display").innerHTML ="floor selected : " + x.options[i].text;
            if(i>1){
            document.getElementById('elevator').style.display = 'block';
            }else{
                document.getElementById('elevator').style.display = 'none';
                 }
          }
        </script>

答案 5 :(得分：0)

要记住的几点

  • 不要在const dateWithTimezoneObject = new Date(properDate.year(), properDate.month(), properDate.date(), properDate.hours(), properDate.minutes()) 中使用onclick，而应在<option>上使用onchange。
  • 如果要处理元素上的“隐藏”属性，则不能通过<select>来更改样式属性
  • display : none/block可以在您的代码中变得健壮，使用if condition值可以达到目标

这是带有“隐藏”属性的工作示例 https://jsfiddle.net/gmall/epbc63w8/1/

希望有帮助！

相关问题
最新问题