0

お問い合わせフォームにドロップダウン選択があり、いずれかのオプションが選択されている場合は、いくつかの追加のフォーム要素を表示したいと思います。それ以外の場合は、追加の要素を非表示にする必要があります。次のコードを使用して、単一のオプションでこれを機能させることができました。

$(".hidden-section").hide();
$("#contact-form select").change(function(){
    if ($(this).val() == "extra options trigger one") {
        $(".hidden-section").slideDown("fast");
    } else {
        $(".hidden-section").slideUp("fast");
    }
});

残念ながら、2つのオプションのいずれかが選択されている場合、これを機能させる方法がわかりません。私がjQueryを機能させることができた唯一の方法はこれです：

$(".hidden-section").hide();
$("#contact-form select").change(function(){
    if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") {
        $(".hidden-section").slideDown("fast");
    } else {
        $(".hidden-section").slideUp("fast");
    }
});

ただし、この場合、デフォルト以外のオプションを選択すると、非表示の要素が表示されます。

これについて行くためのより良い方法についてのアイデアはありますか？アドバイスをいただければ幸いです。

ありがとう！

4

2 に答える 2

2

この行には、あってはならない余分な括弧があります。

if ($(this).val() == "extra options trigger one") || ($(this).val() == "extra options trigger two") {

次のようにする必要があります。

if ($(this).val() == "extra options trigger one" || $(this).val() == "extra options trigger two") {

つまり、if()ステートメントの条件は完全に外側の括弧で囲む必要があるため、次のようになります。

if (condition1 || condition2)          // valid
if ((condition1) || (condition2))      // valid
if (condition1) || (condition2)        // NOT valid
于 2012-08-10T21:17:46.007 に答える
0

コードにコメントを追加さ​​せてください。

まず - 使用しないでください - CSS$(".hidden-section").hide();に追加display:noneする必要があります。.hidden-sectionその理由は、ネットワーク接続が遅い人がいて、ブラウザが JavaScript を実行するまでにhide時間がかかるためです。この間、表示されます。彼らはちらつきを経験します-何かが現れて突然消えます。

コメント #2 -

HTML が Ajax でロードされない場合は、HTML をラップする必要があり$(function(){ /* code here */ });ます。これは、JavaScript が HTML コンテンツを参照する場合に必要です。

コメント #3 -

コードの保守が難しくなります。追加のフィールドを必要とする 3 番目のオプションがあると想像してください。

たとえば、追加のフィールドを必要とする各オプションにクラスを追加する<option class="requires-extra">Option 2</option>と、JavaScript が短くなります。

$(function(){
    $("select").change(function(){
        var $requiresExtra = $(this).find("option:selected").hasClass("requires-extra");
        if ( $requiresExtra ) {
            $(".hidden-section").slideDown("fast");
        } else {
            $(".hidden-section").slideUp("fast");
        }
    });
});

実際の例については、私のフィドルを参照してください。

于 2012-08-10T21:41:15.280 に答える