[英]Drop down value depends on radio button selection
我有两个 name='bb' 的单选按钮,我有 name='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>
试试看:首先包含一个 jquery 库。
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
{
}
});
});
****此代码将根据单选按钮的选择给出值。 我创建了动态下拉菜单,但这里是我提到的 static 选项。 希望这会有所帮助****
function yourfunction(radioid) { if(radioid == 1) { document.getElementById('one').style.display = 'block'; document.getElementById('two').style.display = 'none'; document.getElementById('three').style.display = 'none'; } else if(radioid == 2) { document.getElementById('three').style.display = 'none'; document.getElementById('two').style.display = ''; document.getElementById('one').style.display = 'none'; } else if(radioid == 3) { document.getElementById('three').style.display = ''; document.getElementById('two').style.display = 'none'; document.getElementById('one').style.display = 'none'; } }
<STRONG>Color</STRONG></br> <br> <INPUT TYPE='radio' NAME='grp2' VALUE='City0' onClick="javascript:return yourfunction(1)">Black <INPUT TYPE='radio' NAME='grp2' VALUE='City1' onClick="javascript:return yourfunction(2)">Red <INPUT TYPE='radio' NAME='grp2' VALUE='City2' onClick="javascript:return yourfunction(3)">Blue <br/> <div id = "one" style = "display:none"> <br/> Black <select name="school"> <option name="black" value="b1">black1</option> <option name="black" value="b2">black2</option> <option name="black" value="b3">black3</option> </select><br/> </div><br/> <div id = "two" style = "display:none"> Red <select name="school"> <option name="black" value="r1">red1</option> <option name="black" value="r2">red2</option> <option name="black" value="r3">red3</option> </select> </div> <div id = "three" style = "display:none"> Blue <select name="school"> <option name="black" value="bl1">black1</option> <option name="black" value="bl2">black2</option> <option name="black" value="bl3">black3</option> </select> </div>
动态加载和更新 select 选项:
<script type="text/javascript">
var bedrooms = ['1 Bedroom (350 to 700 sq ft)','2 Bedroom (700 to 1300 sq ft)','3 Bedroom (1300 to 2000 sq ft)','4 Bedroom (2000 to 3000+ sq ft)'];
var offices = ['Studio (400-600 sq ft)','Studio Alcove (600-700 sq ft)'];
function setSelect(v) {
var x = document.getElementById("bedroom");
for (i = 0; i < x.length; ) {
x.remove(x.length -1);
}
var a;
if (v=='homedd'){
a = bedrooms;
} else if (v=='officedd'){
a = offices
}
for (i = 0; i < a.length; ++i) {
var option = document.createElement("option");
option.text = a[i];
x.add(option);
}
}
function load() {
setSelect('homedd');
}
window.onload = load;
</script>
<input type="radio" name="bb" value="home" onclick="setSelect('homedd')" checked > Home <br>
<input type="radio" name="bb" value="office" onclick="setSelect('officedd')" > Office <br>
<label>Size</label>
<select name="bedroom" id="bedroom" style="color: #8E9092; /*height: 38px;width: 228px;*/" >
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.