Question

我有一个包含国家/地区列表的选择框 - 如果选择的值更改为某些国家/地区，我希望显示增值税框，否则应保持隐藏状态。

当页面加载和国家/地区显示为空白时，应隐藏增值显示 - 如果国家/地区显示更改为爱尔兰或西班牙（或已设置为爱尔兰或西班牙），则应显示增值显示。如果国家/地区显示更改为美国，则应隐藏增值税显示等。

我已经检查了许多其他看起来相似但无法使其工作的答案 - 我认为https://stackoverflow.com/a/11295625/1278201是我正在寻找的但是它仍然不起作用，即使该答案中的链接小提琴似乎完全按照我的需要做。

<script type="text/javascript" src="includes/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#country-display").on("change", function() {
        $("#vat-display").hide();
        if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) {
            $("#vat-display").show();
        } 
    });
});
</script>

<div id="country-display">
    <label>Country:</label>
    <select name="country">
        <option value="">Please choose</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Ireland">Ireland</option>
        <option value="Spain">Spain</option>
    </select>
</div>

<div id="vat-display" style="display:none;">
    <label>VAT:</label>
    <input type="text" name="vat">
</div>

Answer 1

您指的是容器DIV。相反，请参阅为您的更改事件命名为“country”的select标记。

OR

指定一些ID以选择标记并将其用于更改事件代码。休息将按预期工作。

Answer 2

试试这个。为您的Html添加了Id属性，并相应地更改了jquery选择器。

<script type="text/javascript">
$(document).ready(function(){
    $("#myCountry").on("change", function() {
        $("#vat-display").hide();
        if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) {
            $("#vat-display").show();
        } 
    });
});
</script>

<div id="country-display">
    <label>Country:</label>
    <select name="country" id="myCountry"> //Added Id attribute
        <option value="">Please choose</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Ireland">Ireland</option>
        <option value="Spain">Spain</option>
    </select>
</div>

或使用它。

更改了jquety选择器以选择div中的select元素。

<script type="text/javascript"> $(document).ready(function(){ $("#country-display").find('select').on("change", function() { $("#vat-display").hide(); if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) { $("#vat-display").show(); } }); }); </script>

Answer 3

$(document).ready(function(){
    $("select[name='country']").on("change", function() {
        $("#vat-display").hide();
        if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) {
            $("#vat-display").show();
        } 
    });
});

Fiddle

最好为select标签使用'id'属性。

如果选择了某些选择值，则显示内容

3 个答案: