1

我在这里得到了一些代码的帮助。我对其进行了调整以尝试隐藏整个 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");
}​

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

4

10 回答 10

1

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

现场演示

$("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");
});​
于 2012-11-30T11:30:43.580 回答
1

您需要在选择值更改时对其进行检查。

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

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

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

示例小提琴

于 2012-11-30T11:31:54.093 回答
0

尝试更改以下行

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

到

 $("#added_fields").hide();
于 2012-11-30T11:30:09.203 回答
0

尝试

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

你可以在这里找到更多信息：http: //api.jquery.com/hide/

更新：如果您想引用您选择的更改事件，您必须在您的选择的 onselectedindexchanged 属性中触发您的函数，或者通过 jQuery 在其上添加一个更改事件：

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

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

于 2012-11-30T11:31:16.887 回答
0

您的代码只执行一次， on $(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/

于 2012-11-30T11:34:44.373 回答
0

试试这个 ：

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

if ( $(this).val() == "Commercial") {
    $("#added_fields").hide();
}
});​
于 2012-11-30T11:35:09.437 回答
0

试试这个：

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

​​演示

于 2012-11-30T11:35:59.317 回答
0

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

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

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

});
于 2012-11-30T11:37:22.373 回答
0

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

所以你可以用click()（或change()）事件来做到这一点，就像在这个小提琴中一样。

于 2012-11-30T11:40:08.620 回答
0

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

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

});
于 2012-11-30T11:50:57.260 回答