想要根據下拉框選擇來顯示/隱藏div

只有在下拉框中選擇「業務使用」時，我纔想讓jQuery顯示div id ='business'。想要根據下拉框選擇來顯示/隱藏div

這是我的代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$('#purpose').on('change', function() { 
    if (this.value == '1'); 
    { 
    $("#business").show(); 
    } 
    else 
    { 
    $("#business").hide(); 
    } 
}); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

和的jsfiddle：http://jsfiddle.net/2kGzZ/1/

來源

2014-02-05 user3263266

裹$(document).ready(function(){...........});處理程序中的代碼，同時刪除if

$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
     $("#business").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
});

的 ;後

Fiddle Demo

來源

2014-02-05 17:56:14

或者把它放在文檔的末尾。 – j08691

或活動代表團 – Satpal

感謝！它現在完美:) – user3263266

你有錯誤代碼unexpected token。使用：

$('#purpose').on('change', function() { 
    if (this.value == '1') { 
    $("#business").show(); 
    } else { 
    $("#business").hide(); 
    } 

    });

Demo

更新：可以使用縮小代碼.toggle()

$('#purpose').on('change', function() { 
    $("#business").toggle(this.value == '1'); 
});

來源

2014-02-05 17:58:36

您需要可以把你的代碼放在頁面的末尾，或者將其封裝在一個文檔準備好的調用中，否則你試圖在不是你的元素上執行代碼不存在。此外，您還可以將您的代碼減少到：

$('#purpose').on('change', function() { 
    $("#business").css('display', (this.value == '1') ? 'block' : 'none'); 
});

jsFiddle example

來源

2014-02-05 17:58:57 j08691

的核心問題是JS錯誤：

$('#purpose').on('change', function() { 
    // if (this.value == '1'); { No semicolon and I used === instead of == 
    if (this.value === '1'){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
}); 
// }); remove

http://jsfiddle.net/Bushwazi/2kGzZ/3/

我不得不清理的HTML & js ...我忍不住自己。

HTML：

<select id='purpose'> 
    <option value="0">Personal use</option> 
    <option value="1">Business use</option> 
    <option value="2">Passing on to a client</option> 
</select> 
<form id="business"> 
    <label for="business">Business Name</label> 
    <input type='text' class='text' name='business' value size='20' /> 
</form>

CSS：

#business { 
    display:none; 
}

JS：

$('#purpose').on('change', function() { 
    if(this.value === "1"){ 
     $("#business").show(); 
    } else { 
     $("#business").hide(); 
    } 
});

來源

2014-02-05 18:05:37

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $('#purpose').on('change', function() { 
     if (this.value == '1') 
     //.....................^....... 
     { 
      $("#business_new").hide(); 
     $("#business").show(); 
     } 
     else if (this.value == '2') 
     { 
      $("#business").hide(); 
     $("#business_new").show(); 
     } 
     else 
     { 
     $("#business").hide(); 
     } 
    }); 
}); 
</script> 
<body> 
<select id='purpose'> 
<option value="0">Personal use</option> 
<option value="1">Business use</option> 
<option value="2">Passing on to a client</option> 
</select> 
<div style='display:none;' id='business'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
<div style='display:none;' id='business_new'>Business Name<br/>&nbsp; 
<br/>&nbsp; 
    <input type='text' class='text' name='business' value="1254" size='20' /> 
    <input type='text' class='text' name='business' value size='20' /> 
    <br/> 
</div> 
</body>

來源

2015-06-11 04:30:31

試試這個這是爲我工作在我的測試演示

<script> 
$(document).ready(function(){ 
$('#dropdown').change(function() 
{ 
// var selectedValue = parseInt(jQuery(this).val()); 
var text = $('#dropdown').val(); 
//alert("text"); 
    //Depend on Value i.e. 0 or 1 respective function gets called. 
    switch(text){ 
     case 'Reporting': 
      // alert("hello1"); 
    $("#td1").hide(); 
      break; 
     case 'Buyer': 
     //alert("hello"); 
    $("#td1").show(); 
      break; 
     //etc... 
     default: 
      alert("catch default"); 
      break; 
    } 
}); 
}); 

</script>

來源

2017-07-05 12:39:00 user8259249

繁瑣的解決方案... –

想要根據下拉框選擇來顯示/隱藏div

回答

相關問題