Home Content of divs not loaded properly when changed selector
Reply: 0

Content of divs not loaded properly when changed selector

user4284 Published in May 21, 2018, 10:34 pm

I have a selector:

    <div id="selectorArende">
    <select required name="multipunktsarende" id="ddlViewBy2">
        <option>Välj ärende</option>
        <option value="installation_ny_mp">Installation av ny multipunkt</option>
        <option value="demontering_av_befintlig_mp">Demontering av befintlig multipunkt</option>

Based on the selected value, a PartialView is loaded with a string model passed to it:

    <div class="installation_ny_mp box">
    @Html.Partial("_NewMpErrandPartialForm1", (string)"Installation av ny multipunkt")
<div class="demontering_av_befintlig_mp box">
    @Html.Partial("_NewMpErrandPartialForm1", (string)"Demontering av befintlig multipunkt")

The JavaScript that solves this is the following:

$(document).ready(function () {
$("#ddlViewBy2").change(function () {
        $(this).find("option:selected").each(function () {
            var optionValue = $(this).attr("value");
            if (optionValue) {
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else {

Within this partialView, I have another selector which activates additional divs:

<label>Välj anslutningspunkt:</label> <br />
        <select name="anslutningspunkt" id="anslutningspunkt" class="" required>
            <option>Välj ärende</option>
            <option id="Transformator" value="Transformator">Transformator</option>
            <option id="Kabelskåp" value="Kabelskåp">Kabelskåp</option>
            <option id="Servis" value="Servis">Servis</option>
    <br />

    <div class="transformatorRadioInput" style="display: none;">
        <select required name="transformatorInput" id="transformatorText" style="width:140px">
            <option value="T1">T1</option>
            <option value="T2">T2</option>
            <option value="T3">T3</option>
            <option value="T4">T4</option>
    <div class="kabelskåpInput" id="kabelskåpInput" style="display:none">
        <input type="text" id="kabelskåpText" name="kabelskåpText" value="" required placeholder="Fyll i kabelskåp"><br>
    <div class="servisInput" id="servisInput" style="display:none">
        <input type="text" id="servisText" name="servisText" value="" required placeholder="Fyll i servis"><br>

The JS for this is:

$(document).ready(function () {
var anslutningspunkt = jQuery('#anslutningspunkt');

var select = this.value;
anslutningspunkt.change(function () {
    if ($(this).val() === 'Transformator') {
    else {
        $('.transformatorRadioInput').hide(); // hide div if value is not "custom"

    if ($(this).val() === 'Kabelskåp') {
        document.getElementById("kabelskåpText").required = true;
    else {
        $('.kabelskåpInput').hide(); // hide div if value is not "custom"

    if ($(this).val() === 'Servis') {
        document.getElementById("servisText").required = true;
    else {
        $('.servisInput').hide(); // hide div if value is not "custom"


This works when I choose the first alternative in the first selector (Installation av ny MP). However, when I change the selector to (Demontering av befintlig multipunkt), and then change the second selector, nothing happens.

Any ideas?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.263018 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO