0

I have a select box with a list of countries - if the select value is changed to certain countries I want a VAT box to display otherwise is should remain hidden.

When page loads and country-display is blank then vat-display should be hidden - if country-display is changed to Ireland or Spain (or is already set to Ireland or Spain) then vat-display should show. If country-display is changed to United States, it should hide vat-display and so on.

I have checked out so many other answers which look similar but cannot get this to work - I thought https://stackoverflow.com/a/11295625/1278201 was what I was looking for but it still does not work even though the linked fiddle in that answer seems to do exactly what I need.

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

3 回答 3

3

You are referring to the container DIV. Instead refer to select tag which has name "country" for your change event.

OR

Assign some ID to select tag and use that for change event code. Rest will work as expected.

于 2013-09-19T08:57:50.183 回答
1

Try This. Added Id attribute to your Html , and changed the jquery selecter accordingly.

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

OR Use this.

Changed the jquety selecter to select the select element inside div.

<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>
于 2013-09-19T09:02:10.423 回答
1 
$(document).ready(function(){
    $("select[name='country']").on("change", function() {
        $("#vat-display").hide();
        if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) {
            $("#vat-display").show();
        } 
    });
});

Fiddle

Still better to use an 'id' property for the select tag.

于 2013-09-19T09:05:40.227 回答