0

我想知道是否有人可以帮助我了解如何实现这一目标。我只想在使用javascript（inc jquery）选择选择框中的某个值时显示两个输入框。

我的选择框有这个值：

<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()在选择上附加一个侦听器，以侦听更改事件。使用更改事件侦听器，您可以在有人更改所选选项时采取行动。然后，您可以.toggle()根据用户在选择列表中选择的内容来显示/隐藏输入。

像这样的东西：

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

工作示例

在此示例中，我使用属性选择器来选择您的元素，因为没有更精确的方法可以继续，但是您可以通过将 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 回答