[英]Showing radiobuttons when dropdown item selected
I am new to Javascript language and I am dealing with the following:我是 Javascript 语言的新手,我正在处理以下问题:
When the visitor clicks on any item within a dropdownlist, four radiobuttons must be seen.当访问者单击下拉列表中的任何项目时,必须看到四个单选按钮。
This is the html code of the dropdown list:这是下拉列表的html代码:
<div class="xmp-form-row ">
<Label CssClass="xmp-form-label" For="wijzigingOpvangVestiging">Vestiging waar uw kind geplaatst is</Label>
<DropDownList Id="wijzigingOpvangVestiging" DataField="wijzigingOpvangVestiging" DataSourceId="dsLocaties" DataTextField="Vestiging" DataValueField="Vestiging" DataType="string" AppendDataBoundItems="True">
<ListItem Value="niet geselecteerd">(Selecteer een vestiging)</ListItem>
</DropDownList>
</div>
And this is the code of the radiobuttons:这是单选按钮的代码:
<div class="xmp-form-row radioButtonCheckfirst locationRB">
<Label CssClass="xmp-form-label" For="wijzigingReden">Reden beeindiging</Label>
<radiobuttonlist id="wijzigingReden" datafield="wijzigingReden" RepeatDirection="Vertical" RepeatLayout="Table" datatype="string">
<listitem value="Uitbreiding van dagen-uren"> Uitbreiding van dagen/uren </listitem>
<listitem value="Gedeeltelijke opzegging"> Gedeeltelijke opzegging </listitem>
<listitem value="Wijziging van vestiging"> Wijziging van vestiging </listitem>
<listitem value="Wijziging van dagen"> Wijziging van dagen </listitem>
</radiobuttonlist>
</div>
Try something like this...尝试这样的事情......
<DropDownList onchange="document.getElementById('wijzigingReden').style.display = ''" Id="wijzigingOpvangVestiging" DataField="wijzigingOpvangVestiging" DataSourceId="dsLocaties" DataTextField="Vestiging" DataValueField="Vestiging" DataType="string" AppendDataBoundItems="True">
<ListItem Value="niet geselecteerd">(Selecteer een vestiging)</ListItem>
</DropDownList>
and set the radio buttons to be display none on page load.并将单选按钮设置为在页面加载时不显示。
<radiobuttonlist style="display: none" id="wijzigingReden" datafield="wijzigingReden" RepeatDirection="Vertical" RepeatLayout="Table" datatype="string">
<listitem value="Uitbreiding van dagen-uren"> Uitbreiding van dagen/uren </listitem>
<listitem value="Gedeeltelijke opzegging"> Gedeeltelijke opzegging </listitem>
<listitem value="Wijziging van vestiging"> Wijziging van vestiging </listitem>
<listitem value="Wijziging van dagen"> Wijziging van dagen </listitem>
</radiobuttonlist>
Hope this helps!希望这可以帮助!
<div id="dropDownDiv" class="xmp-form-row " onChange="showDiv()">
<Label CssClass="xmp-form-label" For="wijzigingOpvangVestiging">Vestiging waar uw kind geplaatst is</Label>
<DropDownList Id="wijzigingOpvangVestiging" DataField="wijzigingOpvangVestiging" DataSourceId="dsLocaties" DataTextField="Vestiging" DataValueField="Vestiging" DataType="string" AppendDataBoundItems="True">
<ListItem Value="niet geselecteerd">(Selecteer een vestiging)</ListItem>
</DropDownList>
</div>
<radiobuttonlist id="wijzigingReden" datafield="wijzigingReden" RepeatDirection="Vertical" RepeatLayout="Table" datatype="string" style="display: none">
<listitem value="Uitbreiding van dagen-uren"> Uitbreiding van dagen/uren </listitem>
<listitem value="Gedeeltelijke opzegging"> Gedeeltelijke opzegging </listitem>
<listitem value="Wijziging van vestiging"> Wijziging van vestiging </listitem>
<listitem value="Wijziging van dagen"> Wijziging van dagen </listitem>
</radiobuttonlist>
<script type="text/javascript">
function showDiv(){
if( document.getElementById('wijzigingReden').style.display == "block"){
document.getElementById('wijzigingReden').style.display = "none";
}
else{
document.getElementById('wijzigingReden').style.display = "block";
}
</script>
Add a css class "hidden" to the radiobutton enclosing div that hides the buttons/label initially, then using jquery...将css类“隐藏”添加到最初隐藏按钮/标签的单选按钮封闭div,然后使用jquery ...
$("#wijzigingOpvangVestiging").change(function() {
$("#nameoftheradiobuttondiv").removeClass("hidden");
});
Fiddle here... http://jsfiddle.net/Z5nNW/2/在这里小提琴...... http://jsfiddle.net/Z5nNW/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.