Jquery 当从下拉列表中选择的内容包含某个单词时显示div

我想做的是，当从下拉列表中选择一个必须包含字符串中某个单词时，使div淡入

到目前为止，我已经让它在做出选择之前立即出现在页面加载上，现在我有了它，尽管做出了选择，但它不会显示在哪里-请给我任何指针

if（$（“选择选项：选中[值*='tailboard']））{
美元（“#tcanopy.towbar_req”）.fadeIn（“慢”）；
}

拖车模型
带斜坡的GD64
GD64带尾板
GD84带坡道
GD84带尾板
带斜坡的GD85
GD85带尾板
带斜坡的P6e
P6e带尾板
P6e家畜模型
带斜坡的P7e
P7e带尾板
P7e家畜模型
P8e带斜坡
P8e带尾板
要求（如果尾板*）：

您需要在

选择

下拉列表中添加一个

onchange

事件，以便在选择选项时淡入：

函数更改选择（）{
所选var=$（“选择选项：所选[value*='tailboard']”）；
如果（选定。长度）{
美元（“#tcanopy.towbar_req”）.fadeIn（“慢”）；
}
}
//检查页面加载
changeSelect（）
.towbar\u要求{
显示：无；
}

挑选
尾板1
其他一些文本
尾板文本123
淡入淡出
试试这个：您可以使用更改事件处理程序并选中选择框的值。如果它包含
tailborad
，则显示div

$("select").on("change", function() {
    var show = $(this).val().toLowerCase().indexOf("tailboard")!=-1;
    if(show) {
     $("#tcanopy .towbar_req").fadeIn("slow");
    }
}}


您需要将
change
事件侦听器附加到select，然后使用
.indexOf（）
检查所选选项值是否包含
Tailboard
单词

速记：

$('select[name="trailermodel"]').on('change', function() {
   $("#tcanopy .towbar_req").toggle($(this).val().indexOf("Tailboard") != -1);
});


$（'select[name=“trailermodel”]”）。在（'change'，function（）上{
var目标=$（“#tcanopy.towbar_请求”）；
if（$（this）.val（）.indexOf（“尾板”）！=-1）{
target.fadeIn（“慢”）；
}否则{
目标。淡出（“缓慢”）；
}
});

拖车模型
带斜坡的GD64
GD64带尾板
GD84带坡道
GD84带尾板
带斜坡的GD85
GD85带尾板
带斜坡的P6e
P6e带尾板
P6e家畜模型
带斜坡的P7e
P7e带尾板
P7e家畜模型
P8e带斜坡
P8e带尾板


目标元素
首先，当下拉值更改时，您不指定要运行的代码。加载文档后（根据您对document.ready的评论），您所拥有的将运行一次。您需要将逻辑封装在适当的事件处理程序中，如下所示

$("select").on("change", function() {
    if (RegExp(/tailboard/i).test($(this).val()) {
        $("#tcanopy .towbar_req").fadeIn("slow");    
    }
    else {
        $("#tcanopy .towbar_req").fadeOut("slow");
    }
});

这样，每次匹配
$（“选择”）
的任何内容发生更改时，代码都将被执行。如果向页面添加更多的select元素，请记住这一点。您可能想给它一个ID，然后用它来选择它

其次，您的代码将在所选值中查找
尾板
，但您的值中没有该值-它们有
尾板
（大写t）

上面的代码使用正则表达式在值中查找
tailboard
，但不区分大小写，因此应该可以解决您的问题


这里有一个有效的例子

注意：我加入了CSS来设置要切换的元素的初始状态


$（“选择”）。在（“更改”，函数（）上{
//显示/隐藏尾板相关div
if（RegExp（/tailboard/i）.test（$（this.val（）））{
美元（“#tcanopy.towbar_req”）.fadeIn（“慢”）；
}
否则{
$（“#tcanopy.towbar_请求”）.淡出（“慢”）；
}
//显示/隐藏渐变相关div
if（RegExp（/ramp/i）.test（$（this.val（）））{
美元（“#tcanopy.ramp_req”）.fadeIn（“慢”）；
}
否则{
$（“#tcanopy.ramp_req”）.淡出（“慢”）；
}
});
.towbar\u请求，
.ramp_需求{
显示：无；
}

拖车模型
带斜坡的GD64
GD64带尾板
GD84带坡道
GD84带尾板
带斜坡的GD85
GD85带尾板
带斜坡的P6e
P6e带尾板
P6e家畜模型
带斜坡的P7e
P7e带尾板
P7e家畜模型
P8e带斜坡
P8e带尾板
要求（如果尾板*）：

要求（如果坡道*）：

问题出在哪里？也请提供您的HTML代码。选择包含尾板的选项时不会发生任何情况（我希望它在.towbar_req div中消失）。下面的答案是猜测，基于您提供给我们的小信息。您需要发布相关的标记以及相关的代码。还有，你的脚本就是这个
if
语句，还是还有更多的内容？@Archer这只是我现在添加的一个基本下拉列表，除了doc ready之外，脚本中没有其他内容。因此，你的脚本实际上是
然后是
if
语句，然后是
？此外，您的标记不包含任何将使用
$（“#tcanopy.towbar_req”）
选择的内容。不幸的是，仍然没有发生任何事情-如果可能的话，该选项包含的单词比尾板多？
尾板
以大写字母t开头，我用小写字母编写。我们可以使用
toLowerCase（）
函数，因为这将捕获带有调用类型字母的尾板。请查看更新后的淡入淡出，即使在选择选项2时，淡入淡出仍保持不变？我没有放松对大小写敏感度的了解，因此感谢您，不幸的是，尽管Dreamweaver在这一行显示了语法错误：if（RegExp（/tailboard/I）.test（$（this）.val（））{忽略Dreamweaver-运行它并在浏览器控制台中查找错误。我首先这样做，在上面的同一行显示了一个错误-“未捕获的语法错误：意外标记{”对不起，我有一个输入错误-缺少结尾
）
。我已经修复了它并添加了一个代码段谢谢你破解了它！现在我想知道怎么做