Question

我帮助了一些代码here。我调整它试图隐藏整个div而不是元素。这只是一个小小的调整，但我似乎做了一些事情来阻止它的运作。

HTML

<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
<div id="added_fields">
    <select name="menu-168" class="wpcf7-validates-as-required">
        <option value="Residential">Residential</option>
        <option value="Commercial">Commercial</option>
    </select>
</div>

JS

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

有人会好心地告诉我哪里出错了吗？

Answer 1

您did not write the code on change event of select和加载时所选的值不是商业性的，因此您在if下的声明不会执行。

<强> Live Demo

$("select[name='menu-168']").change(function() {

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

Answer 2

您需要在选择值发生变化时进行检查。

我想隐藏输入框而不是隐藏的选择框

在这种情况下，您需要更改#added_fields选择器。试试这个：

$("select[name='menu-168']").change(function() {
    if ($(this).val() == "Commercial") {
        $('#added_fields').addClass("hidden");
    }
    else {
        $('#added_fields').removeClass("hidden")
    }
});

Example fiddle

Answer 3

尝试更改以下行

 $("#added_fields").addClass("hidden");

到

 $("#added_fields").hide();

Answer 4

试

$("#added_fields").hide();

您可以在此处找到更多信息：http://api.jquery.com/hide/

更新：如果你想引用你的select的更改事件，你必须在select的onselectedindexchanged属性中激活你的函数或者通过jQuery在它上面添加一个change事件：

$("select[name='menu-168']").change(function() {
  if ($(this).val() == "Commercial") {
    $("#added_fields").hide();
  }
});

有关更改的更多信息：http://api.jquery.com/change/

Answer 5

您的代码仅在$(document).ready();上执行一次。将其包装在.change()事件处理程序中。

$("select[name='menu-168']").change(function(e) {
    if ($(this).val() == "Commercial") {
        $("#added_fields").addClass("hidden");
    }
});

更新了小提琴：http://jsfiddle.net/K9zGP/36/

<强>更新

要使文字输入重新出现在jsfiddle.net/K9zGP/46中，请改为使用.toggleClass()：

$("select[name='menu-168']").change(function(e) {
    var isCommercial = $(this).val() == "Commercial";
    $("#added_fields").toggleClass("hidden", isCommercial);
});

YAF：http://jsfiddle.net/K9zGP/71/

Answer 6

试试这个：

$("select[name='menu-168']").change(function() {

if ( $(this).val() == "Commercial") {
    $("#added_fields").hide();
}
});

Answer 7

试试这个：

$("select").change(function(){
if($("select option:selected").val() == "Commercial") 
$("input[name=text-708]").hide();
else
$("input[name=text-708]").show();   
});

DEMO

Answer 8

确保您在选择列表的更改事件中有option:selected property

$("select[name='menu-168']").bind("change",function(e){

    if ($("select[name='menu-168'] option:selected").val() == "Commercial") {
        $("#added_fields").hide();
    }

});

Answer 9

您必须“附加”事件“隐藏”。

因此，您可以使用this fiddle中的click()（或change()）事件执行此操作。

Answer 10

hay yomiss调用选择框的更改事件。检查这个小提琴。 http://jsfiddle.net/K9zGP/44/

 $("select[name='menu-168']").change(function(){
alert($(this).val());
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}

});

根据选择的输入框隐藏div

10 个答案: