javascript - jquery - 下拉选择功能的问题

Question

我的 WordPress 插件遇到了问题，该插件在我网站的单个页面上创建了许多动态选择框“下拉框”。它是一个电子商务网站。该插件是“复合产品”。

不幸的是，这个插件为每个下拉菜单提供了相同的 ID 和类。哎哟。

我很高兴使用代码的修改版本，从这里开始- jquery function on dropdown select

我使用所选项目的“var”(这是唯一的)，该选择用于在页面上的其他位置重新定义 CSS。

我的问题 - 在单独的下拉菜单 (class = .component_options_select ) 上，我尝试通过文本或 html 选择更多选项。两者都失败了。我无法使用 var，因为该下拉列表的内容非常庞大且动态。 jquery有没有更好的搜索功能？

jQuery(document).ready(function($){
    $('select[class="component_options_select"]').change(function(){

        if ($(this).val() == "6785")
            $(".element-to-change").css({"width":"530px"})
            .add(".blaeu-prints-builder-inner").css({"background-image":"url('/storefront-blaeu/gfx/12x16.jpg')"},100);

        if ($(this).val() == "6786")
            $(".element-to-change").css({"width":"550px"})
            .add(".blaeu-prints-builder-inner").css({"background-image":"url('/storefront-blaeu/gfx/18x24.jpg')"},100);

        if ($(this).val() == "6787")
            $(".element-to-change").css({"width":"600px"})
            .add(".blaeu-prints-builder-inner").css({"background-image":"url('/storefront-blaeu/gfx/27x39.jpg')"},100);

    });
});

就这些了，但是下面的代码没有效果。

        if ($(this).text() == "This Selection")
      $(".another-element-i-want-to-edit").css('display','block');

我尝试过使用 .html 和 .text，也尝试过使用包含选项的文本...都不起作用。我对 JQuery 不太有天赋!

非常欢迎任何帮助。

Answer 1

如果

if ($(this).text() == "This Selection"){
    $(".another-element-i-want-to-edit").css('display','block');
}

与选择的相同change功能中，它不起作用，因为您需要检查值而不是文本。含义变化

if ($(this).text() == "This Selection")

至

if ($(this).val() == "This Selection")