0

誰かが私がこれを達成する方法を理解するのを手伝ってくれるかどうか疑問に思っています。javascript（inc jquery）を使用して選択ボックスの特定の値が選択された場合にのみ、2つの入力ボックスを表示したいと思います。

私の選択ボックスには次の値があります。

<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>

私の入力ボックスには次の値があります。

<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">

擬似コードでは、私は次のようなものを求めています。

<if select name="menu-168" value = "Commerical">
<add css property ".hidden" to input name="text-708">
</if>

私のJavaScriptの知識はとても貧弱です、誰かがこれがどのように行われるかを私に見せてもらえますか？これは、関連するHTMLを含むJSfiddleです。

http://jsfiddle.net/K9zGP/

4

3 に答える 3

5

これは使用していjQueryます：

if ($("select[name='menu-168']").val() == "Commercial") {
    $("input[name='text-708']").addClass("hidden");
}​

ちなみに、HTML要素を参照するために名前の代わりにクラスを使用することをお勧めします。クラスの選択は、属性よりもはるかに高速です。

于 2012-11-30T09:53:33.350 に答える
3

.on()選択にリスナーをアタッチして、変更イベントをリッスンするために使用できます。change-eventリスナーを使用すると、誰かが選択したオプションを変更するたびに行動できます。次に.toggle()、ユーザーが選択リストで何を選択したかに応じて、入力を表示/非表示にするために使用できます。

このようなもの：

​$(function(){
    $("select[name='menu-168']").on("change", function (){           
        $("input[name='text-708']").toggle($(this).val() !== "Commercial");
    });
});​

実例

この例では、属性セレクターを使用して要素を選択します。これ以上正確なものはないためですが、関連する要素にIDを追加し、代わりにセレクターにIDを使用することで、パフォーマンスを少し向上させることができます。

于 2012-11-30T09:55:24.503 に答える
1 
$('#menu-168').on('change', function(){
    ($this).val() = "Commericial" ? 
        $('input[name='text-708']').show() : $('input[name='text-708']').hide();
    }
})
于 2012-11-30T09:57:57.673 に答える