javascript - 下拉值取决于单选按钮的选择

Question

我有两个名称='bb'的单选按钮，并且我有名称='size'的下拉按钮，该按钮应该有两个不同的选项，具体取决于选中的单选按钮。

Code below
----------------------------------------
<input type="radio" name="bb" id="bb" checked required="true" value="home" >
<div>Home</div>
<input type="radio" name="bb" id="bb" value="office">
<div>Office</div>

<label>Size</label>
<select name="bedroom" id="bedroom" style="color: #8E9092; /*height: 38px;width: 228px;*/" >

For Home---
<option value="1 Bedroom (350 to 700 sq ft)">1 Bedroom (350 to 700 sq ft)</option>
<option value="2 Bedroom (700 to 1300 sq ft)">2 Bedroom (700 to 1300 sq ft)</option>
<option value="3 Bedroom (1300 to 2000 sq ft)">3 Bedroom (1300 to 2000 sq ft)</option>
<option value="4 Bedroom (2000 to 3000+ sq ft)">4 Bedroom (2000 to 3000+ sq ft)</option>

For Office--
<option value="">Choose size</option>
<option value="Studio (400-600 sq ft)">Studio (400-600 sq ft)</option>
<option value="Studio Alcove (600-700 sq ft)">Studio Alcove (600-700 sq ft)</option>

Answer 1

尝试一下:首先包含一个 jquery 库。

Demo

html:

  <input type="radio" id="home" name="chk" value="1" checked>Home <br/>
  <input type="radio" id="office" name="chk" value="2" >Office<br/>
<br/>
  <select id="describe">
     <option name="name" value="1">Select from above</option>
  </select>

Jquery:

var listA = [{name:'1 Bedroom 350 to 700 sq ft', value:'1 Bedroom 350 to 700 sq ft'}, {name:'2 Bedroom 700 to 1300 sq ft', value:'2 Bedroom 700 to 1300 sq ft'}, {name:'3 Bedroom 1300 to 2000 sq ft', value:'3 Bedroom 1300 to 2000 sq ft'}];

var listB = [{name:'Studio 400-600 sq ft', value:'Studio 400-600 sq ft'}, {name:'Studio Alcove 600-700 sq ft', value:'Studio Alcove 600-700 sq ft'}];

$(document).ready( function() {
  $("input[name='chk']").on('change',function() {

      if($(this).is(':checked') && $(this).val() == '1')
      {
        $('#describe').empty()
        $.each(listA, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        });                  
      }
      else if($(this).is(':checked') && $(this).val() == '2')
      {
        $('#describe').empty()
        $.each(listB, function(index, value) {
         $('#describe').append('<option value="'+value.value+'">'+value.name+'</option>');
        }); 
      }
      else
      {

      }

  });
});