CODEWITHSUNDEEP
javascripthtmlcss
Lukas Klinga
Lukas Klinga

Reputation: 11

Show radio buttons on specific selection

How do I make a selection see my choice, and based on that choice, show or hide a radio button selection.

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>

I tried onSelect but it doesnt do anything, as far as i understand once the option with myFuction is selected the radio buttons should appear. I also placed hidden on the div of the radio buttons to hide them so they could appear after i select a certain option. Any solution would help.

Upvotes: 0

Views: 109

Answers (6)

Rhea
Rhea

Reputation: 644

instead of onclick on everyoption, do onChange on the select itself.

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

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

Upvotes: 0

Gaurav Mall
Gaurav Mall

Reputation: 502

Few Points to remember

  • Dont use onclick in <option> use onchange on <select> instead.
  • if you are dealing with "hidden" attribute on element you can not alter style attribute by display : none/block
  • if condition can be made robust in your code, use <select> value to achieve the goal

here is the working example with "hidden" attribute https://jsfiddle.net/gmall/epbc63w8/1/

Hope that helps!!!

Upvotes: 0

Pranay Nailwal
Pranay Nailwal

Reputation: 542

The Below code might help you. Using onChange you can call a function which gets the index of the selection and uses it to display the radio buttons. I have used the "display" property of css to hide/unhide the radio buttons. keep in mind that the name of the radio buttons sould be same for individual selection. In this case i am checking if there are more than one floors to display the radio buttons. 

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

Upvotes: 0

Pay it forward
Pay it forward

Reputation: 461

Try this :

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>

Upvotes: 1

Smollet777
Smollet777

Reputation: 1646

There is no oncklick handlers on option tag so use onchange on select tag. And Check if value is NaN(not a number)

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>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You can attach the event in the select element instead of option. Also you have to change the event from onclick to onchange.

Try the following way:

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>

Upvotes: 0

Related Questions