Question

我想知道是否有人可以帮助我理解如何实现这一目标。我只想在使用javascript（包含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/

Answer 1

这是使用jQuery：

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

在旁注中，我建议您使用类而不是名称来引用HTML元素。类选择比属性快得多。

Answer 2

您可以使用.on()在select上附加侦听器，以侦听更改事件。使用change-event listener，只要有人更改了所选选项，您就可以执行操作。然后，您可以使用.toggle()显示/隐藏输入，具体取决于用户在选择列表中选择的内容。

这样的事情：

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

Working example

在这个例子中，我使用属性选择器来选择你的元素，因为没有更精确的东西可以继续，但是你可以通过向相关元素添加ID来获得更好的性能，并将其用于选择器。

Answer 3

$('#menu-168').on('change', function(){
    ($this).val() = "Commericial" ? 
        $('input[name='text-708']').show() : $('input[name='text-708']').hide();
    }
})

根据选择框值显示文本框

3 个答案: