下拉值取决于单选按钮选择
下拉值取决于单选按钮选择
提问于 2015-03-28 20:16:11
我有两个单选按钮与名称=‘bb’和我有下拉按钮与名称=‘大小’，这应该有两个不同的选项取决于选中的单选按钮。
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>
Stack Overflow用户
发布于 2015-03-28 22:24:48
尝试一下:首先包含一个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
{
}
});
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29317034
复制相关文章
相似问题
腾讯云开发者
