0

国のリストを含む選択ボックスがあります-選択値が特定の国に変更された場合、VATボックスを表示したいのですが、それ以外の場合は非表示のままにする必要があります。

ページが読み込まれ、country-display が空白の場合、vat-display は非表示にする必要があります。country-display がアイルランドまたはスペインに変更された場合 (または既にアイルランドまたはスペインに設定されている場合)、vat-display が表示されます。country-display が United States に変更された場合、vat-display などを非表示にする必要があります。

似ているように見えるがこれを機能させることができない他の多くの回答をチェックしました-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>
4

3 に答える 3

3

コンテナDIVを参照しています。代わりに、変更イベントに「country」という名前の select タグを参照してください。

また

選択タグに ID を割り当て、それを変更イベント コードに使用します。残りは期待どおりに機能します。

于 2013-09-19T08:57:50.183 に答える
1

これを試して。Id 属性を Html に追加し、それに応じて 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>

または これを使用します。

div 内の select 要素を選択するように jquety セレクターを変更しました。

<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();
        } 
    });
});

フィドル

select タグには 'id' プロパティを使用することをお勧めします。

于 2013-09-19T09:05:40.227 に答える