ドロップダウン値が0のときdivを非表示

Question

ドロップダウンにデフォルト値= 0がある数式ページがあります。 値が= 0の場合、ページが読み込まれている場合でもdivを非表示にします。

私はjavascriptを使うべきだと信じていますが、jQueryを使うべきですか？

私はjQueryの有無に関わらず試しましたが、私のコードを動作させることができませんでした。

これは、これは私が非表示にしたいdiv要素であるドロップダウン

<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv"> 
    <option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option> 

です。

<div id="product-description" class="product-description"></div> 

私は私の全体のコードは、私が間違って何をやっているこのhttp://pastebin.com/WTFu3Hte

のように見える？これは

    <script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery("#sel-lease-product").change(function() { 
if(jQuery(this).find("option:selected").val() == 0) { 
    jQuery(".product-description").hide(); 
} 
}); 
}); 
</script> 

をJSしようとしたJS

function hideDiv(elem) { 
    if(elem.value == 0){ 
    document.getElementById("product-description").style.display = "none"; 
}   } 

Answer 1

あなたはselectタグからであるonchange()値をチェックする必要がある場合は、直接selectタグ自体 にonchange()関数を書く二つの方法

1. を好むことができます
2. IDを選択した場合はhelpを使用して関数を呼び出し、スクリプト自体に変更を書き込むことができます。

方法1：

HTML：

<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);"> 
<option value="">Please Select</option> 
<option value="0">Zero</option> 
<option value="1">One</option> 
</select> 
<div id="product-description" class="product-description">product-description</div> 

JS：

function hide_function(a) 
{ 
if(a=='0') 
{ 
$('#product-description').hide(); 
} 
else 
{ 
$('#product-description').show(); 
} 
} 

方法2：

スクリプトファイル自体のon change関数を直接呼び出します。

$(document).ready(function() { 
    $("#sel-lease-product").change(function() { 
    if($(this).val() === "0") { 
     $(".product-description").hide(); 
    }else{ 
     $(".product-description").show(); 
    } 
    });  
    $("#sel-lease-product").change(); //Again invoking the change function on-load of the page  
}); 

Answer 2

はこれを試してみてください：

$(document).ready(function() { 
 
     
 
    $("#sel-lease-product").on("change",function(){ 
 
      
 
     if($(this).val() == 0) { 
 
       
 
       $(".product-description").hide(); 
 
       
 
     } 
 
    }).change(); 
 
})

<select class="products-dropdown" name="lease-product" id="sel-lease-product"> 
 
    
 
    <option value="1">1</option> 
 
    <option value="0">0</option> 
 
</select> 
 

 
<div id="product-description" class="product-description">product-description</div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

jQuery.change()を使用して、ページの読み込みに予想される結果を達成するために、最初はchangeハンドラを起動します。それらを一緒に使用していない、またはJavaScriptjQueryのいずれかを使用します。

jQuery.toggleではなく、両方のjQuery.showとjQuery.hide

注意を使用しての使用することができます！

$(document).ready(function() { 
 
    $("#sel-lease-product").change(function() { 
 
    $(".product-description").toggle(this.value != 0); 
 
    }).change(); 
 
    //-^^^^^^^^ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select class="products-dropdown" name="lease-product" id="sel-lease-product"> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 

 
<div class="product-description">Content here....</div>

Answer 4

$(document).ready(function() { 
 
    $("#sel-lease-product").change(function() { 
 
    if($(this).val() == 0) { 
 
     $(".product-description").hide(); 
 
    }else{ 
 
     $(".product-description").show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="products-dropdown" name="lease-product" id="sel-lease-product"> 
 
    <option value="">select</option> 
 
    <option value="0">0</option> 
 
    <option value="1">1</option> 
 
</select> 
 

 
<div id="product-description" class="product-description">Hide if 0</div>

Answer 5

このコードを試してみてください。

$(document).ready(function() { 
    $("#sel-lease-product").change(function() { 
    if($(this).val() === "0") { 
     $(".product-description").hide(); 
    }else{ 
     $(".product-description").show(); 
    } 
    }); 

    $("#sel-lease-product").change(); 

}); 

あなたはページがロードイベントの変更を実行するために覚えているときにコードを実行したい場合あなたの選択

結果：あなたはチェックの場合/他のタイプを行う必要があるので、https://jsfiddle.net/cmedina/mwz5udwz/

Answer 6

さて、あなたのコードが値を再表示することはありません。いいことは、jQueryが組み込まれているので、booleanでトグルを呼び出すことができます。

また、選択したオプションを探す必要はありません。val（）はそれを行います。また、ページが読み込まれたときに要素が正しい状態になっていることを確認するには、変更イベントをトリガーします。

$("#sel-lease-product").on("change", function() { 
 
    $(".product-description").toggle($(this).val() !== "0"); 
 
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="sel-lease-product"> 
 
    <option value="0">Pick</option> 
 
    <option value="1">FOO</option> 
 
</select> 
 

 
<div class="product-description">Description</div>