[英]Change attribute depending on Select Option
I want to make the disappear when Other Countries is selected. 我想在选择“其他国家”时消失。
This is my HTML 这是我的HTML
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
And this is my script (which I found here on stackoverflow) 这是我的脚本(我在stackoverflow上找到了它)
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "inline");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
And I don't know why but it isn't working, it just stays there. 而且我不知道为什么,但是它没有用,只是停留在那儿。
try 尝试
your html is invalid, wrap the tr inside table 您的html无效,将tr包裹在表中
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
JS JS
$("select").on('change', function () {
if (this.value == 'Portugal') {
$("#this").show();
} else {
$("#this").hide();
}
});
$("select").on('change', function () {
$("#this").toggle(this.value != "OtherCountries");
});
Use this code 使用此代码
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$(".country").change(function() {
var sel = $(this).val();
if (sel=='Portugal') {
$("#this").show();
}
if (sel=='OtherCountries') {
$("#this").hide();
}
});
</script>
First change the ID to another one more explicit like "vat" or something, and try this: 首先将ID更改为另一个更明确的名称,例如“ vat”或其他名称,然后尝试以下操作:
$('.country').change(function(){
if($(this).val() == "OtherCountries"){
$("#vat").hide();
}else{
$("#vat").show();
}
});
You can use show/hide instead of using css() method. 您可以使用show / hide而不是css()方法。
Try this: 尝试这个:
$(".country").on('change', function() { if($(this).val()=="OtherCountries"){ $("#this").hide(); }else{ $("#this").show(); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select class="country" name="country"> <option value="Portugal">Portugal</option> <option value="OtherCountries">Other Countries</option> </select> <table id="this"> <tr> <td valign="middle"><label class="registration">VAT (23%)</label></td> <td valign="middle"></td> <td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td> </tr> </table>
Table tag was missing in your HTML due to which it was not identifying table row with ID. 您的HTML中缺少表格标记,原因是该标记无法识别具有ID的表格行。 I have corrected the code.
我已经更正了代码。 Please take a look at the code given below.
请看下面给出的代码。
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "block");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.