ausgeblendeter Text ist ausgeblendet und wird nicht angezeigt

Unten ist meine Codierung zum Erstellen von Registerkarten. In jedem Fall habe ich ein Dropdown, wenn ich den Wert india in jedem Tabs in der ausgeblendeten Textbox sollte auf dem jeweiligen Tab anzeigen bedeutet, wenn ich den Wert india in Tab1 Drop-down ausgeblendet Textfeld nicht Tab2 und Tab3 anzeigen und ich muss w3 ändern -border rot # 00a8a8 Farbeausgeblendeter Text ist ausgeblendet und wird nicht angezeigt

function openCity(evt, cityName) { 
 

 
    var i, x, tablinks; 
 
    x = document.getElementsByClassName("sendingType"); 
 

 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablink"); 
 
    for (i = 0; i < x.length; i++) { 
 
    tablinks[i].className = tablinks[i].className.replace(
 
     " w3-border-red", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.firstElementChild.className += " w3-border-red"; 
 
} 
 

 

 
$(document).ready(function() { 
 
    $("#ddlPassport").change(function() { 
 
    if ($(this).val() == "Y") { 
 
     $("#dvPassport").show(); 
 
    } else { 
 
     $("#dvPassport").hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#ddlPassport1").change(function() { 
 
    if ($(this).val() == "Y") { 
 
     $("#dvPassport").show(); 
 
    } else { 
 
     $("#dvPassport").hide(); 
 
    } 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#ddlPassport2").change(function() { 
 
    if ($(this).val() == "Y") { 
 
     $("#dvPassport").show(); 
 
    } else { 
 
     $("#dvPassport").hide(); 
 
    } 
 
    }); 
 
});

.sendingType { 
 
    display: none; 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<body class="w3-container"> 
 

 
    <h2>Tabs in a Grid</h2> 
 

 
    <div class="w3-row"> 
 
    <a href="#" onclick="openCity(event, 't1');"> 
 
     <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1 
 

 
     </div> 
 
    </a> 
 
    <a href="#" onclick="openCity(event, 't2');"> 
 
     <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div> 
 
    </a> 
 
    <a href="#" onclick="openCity(event, 't3');"> 
 
     <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div> 
 
    </a> 
 
    </div> 
 
    <br> 
 

 
    <div id="t1" class="w3-container sendingType"> 
 

 
    <div class="form-group"> 
 
     <label class="col-xs-1 control-label">dropdown</label> 
 
     <div class="col-xs-3"> 
 
     <select name="country" class="form-control" id="ddlPassport"> 
 
      <option value="">Select a country</option> 
 
      <option value="Y">india</option> 
 
      <option value="N">america</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 

 

 

 
    <div id="dvPassport" style="display: none"> 
 
     <div class="form-group"> 
 
     <label class="col-xs-1 control-label">Text box</label> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 

 
    </div> 
 

 

 

 
    <div id="t2" class="w3-container sendingType"> 
 

 

 
    <div class="form-group"> 
 
     <label class="col-xs-1 control-label">dropdown</label> 
 
     <div class="col-xs-3"> 
 
     <select name="country" class="form-control" id="ddlPassport1"> 
 
      <option value="">Select a country</option> 
 
      <option value="Y">india</option> 
 
      <option value="N">america</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div id="dvPassport1" style="display: none"> 
 
     <div class="form-group"> 
 
     <label class="col-xs-1 control-label">Text box</label> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 

 
    <div id="t3" class="w3-container sendingType"> 
 

 

 
    <div class="form-group"> 
 
     <label class="col-xs-1 control-label">dropdown</label> 
 

 
     <div class="col-xs-3"> 
 
     <select name="country" class="form-control" id="ddlPassport2"> 
 
      <option value="">Select a country</option> 
 
      <option value="Y">india</option> 
 
      <option value="N">america</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div id="dvPassport2" style="display: none"> 
 
     <div class="form-group"> 
 
     <label class="col-xs-1 control-label">Text box</label> 
 
     <div class="col-xs-3"> 
 
      <input type="text" class="form-control"> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-09-16 Deep Chand Jaipur

freundlicherweise ändern Sie den Titel "Versteckte Textbox wird nicht in jeder Registerkarte angezeigt" ist nicht eine gute. ** versteckter Text ist ausgeblendet und wird nicht angezeigt ** – guradio

Wirklich? '$ (this) .val()'? jQuery hat deine Gehirne ausgefressen, du weißt nicht einmal über 'this.value', oder? Web-Entwicklung ist zum Scheitern verurteilt. – Azamantes

@Azamantes was ist falsch mit '$ (this) .val()' – guradio

Sie verwenden die gleiche versteckte ID Textbox jedes Mal. Uns die entsprechende Textbox-ID. Außerdem müssen Sie nicht jedes Mal die fertige Funktion verwenden. Sie können einmal verwenden und alle anderen Funktionen hinzufügen.

$(document).ready(function() { 
$("#ddlPassport").change(function() { 
    if ($(this).val() == "Y") { 
     $("#dvPassport").show(); 
    } else { 
     $("#dvPassport").hide(); 
    } 
    }); 
}); 


    $("#ddlPassport1").change(function() { 
    if ($(this).val() == "Y") { 
     $("#dvPassport1").show(); 
    } else { 
     $("#dvPassport1").hide(); 
    } 
    }); 


    $("#ddlPassport2").change(function() { 
    if ($(this).val() == "Y") { 
     $("#dvPassport2").show(); 
    } else { 
     $("#dvPassport3").hide(); 
    } 
    }); 
});

Quelle

2016-09-16 05:56:42 Ish

Bevor ich jetzt in tab1 eine versteckte Textbox bekomme, die auch nicht mit deiner jquery angezeigt wird –

ausgeblendeter Text ist ausgeblendet und wird nicht angezeigt

Antwort

Verwandte Themen