Отображение радиоблок при выборе выпадающего пункта

66
6

Я новичок в языке Javascript, и я имею дело со следующим:

Когда посетитель нажимает на любой элемент в раскрывающемся списке, должны быть видны четыре радиообъектива.

Это 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>

И это код радиолюбителей:

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

спросил(а) 2020-04-04T00:25:38+03:00 3 месяца назад
1
Решение
54

Попробуй что-нибудь вроде этого...

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

и установите радиокнопки для отображения без загрузки страницы.

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

Надеюсь это поможет!

ответил(а) 2020-04-04T00:39:14.758871+03:00 3 месяца назад
39

Я предлагаю вам связать событие change с вашим Dropdown. документы

ответил(а) 2020-04-04T00:25:38+03:00 3 месяца назад
40

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

ответил(а) 2020-04-04T00:25:38+03:00 3 месяца назад
38

Добавьте класс css "скрытый" в оболочку, включающую оболочку, которая сначала скрывает кнопки/метку, а затем использует jquery...

$("#wijzigingOpvangVestiging").change(function() {
$("#nameoftheradiobuttondiv").removeClass("hidden");
});

Скрипт здесь... http://jsfiddle.net/Z5nNW/2/

ответил(а) 2020-04-04T00:25:38+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема