안녕 내 연락처 양식에는 양식의 div 상자가 드롭 다운 값에 따라 숨겨 지거나 표시되는 두 개의 드롭 다운 목록이 있습니다. 문제는 내가 둘 다 관리 할 수 없다는 것입니다. 첫 번째 드롭 다운 "class = color"가 제대로 작동하지만 "red box"를 표시하는 대신 두 번째 드롭 다운 "class = ddcolor"를 선택하면 전체 "redd"가 숨겨집니다. 상자". 말로 설명하기가 조금 어렵지만 전체 코드를 보냅니다. 도와주세요. 감사합니다
<!doctype html>
<html>
<head>
<!--hide/show div based on dropdown selection-->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script src="js/hid_show_div.js"></script>
<script src="js/main_hid_show.js"></script>
</head>
<body>
<div>
<fieldset>
<p dir="rtl"><label>case1</label>
<select id="Color" required="required">
<option>please select</option>
<option value="redd">home<option>
<option value="greenn">car</option>
</select></p>
</fieldset>
</div>
<div class="redd box">
<div>
<fieldset>
<p dir="rtl"><label>case2</label>
<select id="ddColor" required="required">
<option>please select</option>
<option value="red">sell<option>
<option value="green">rent</option>
</select></p>
</fieldset>
</div>
<div class="red box">
</div>
<div class="green box">
</div>
</div>
<div class="greenn box">
</div>
</body>
</html>main_hid_show.js
$(document).ready(function(){
$("#Color").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="redd"){
$(".box").not(".redd").hide();
$(".redd").show();
}
else if($(this).attr("value")=="greenn"){
$(".box").not(".greenn").hide();
$(".greenn").show();
}
else{
$(".box").hide();
}
});
}).change();
});hid_show_div.js
$(document).ready(function(){
$("#ddColor").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else{
$(".box").hide();
}
});
}).change();
});문제는 외부 .redd및 .greenn클래스뿐만 아니라 내부 .red및 .green클래스에 대한 '상자'클래스가 있다는 것입니다 . 이것은 'red'클래스가없는 'box'클래스가있는 요소이기 때문에 옵션 .redd을 선택 하면 외부가 숨겨 .red집니다.
내부 클래스의 이름을 다음으로 변경 .inner-box한 다음 jquery를 다음과 같이 업데이트하면 작동합니다.
$("#ddColor").change(function () {
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".inner-box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".inner-box").not(".green").hide();
$(".green").show();
}
else{
$(".inner-box").hide();
}
});
}).change();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다