Question

我希望在选择其他国家时消失。

这是我的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>

这是我的脚本（我在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>

我不知道为什么但是它不起作用，只是停留在那里。

Answer 1

试

你的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>

Working demo

JS

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

 });

 $("select").on('change', function () {
     $("#this").toggle(this.value != "OtherCountries");
 });

DEMO

Answer 2

使用此代码

<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>

Answer 3

首先将ID更改为另一个更明确的“vat”或其他内容，然后尝试：

$('.country').change(function(){

  if($(this).val() == "OtherCountries"){
    $("#vat").hide();
  }else{
    $("#vat").show();
  }

 });

Answer 4

您可以使用show / hide而不是使用css（）方法。

试试这个：

$(".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>

Answer 5

HTML中缺少表标记，因为它没有标识带有ID的表行。我已经纠正了代码。请看下面给出的代码。

<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>

根据选择选项更改属性

5 个答案:

Working demo

DEMO