Question

在我的网站上，我有一系列基于其他页面内容进行隐藏/显示的div。我现在想要的是基于这些div之一可见的预选下拉菜单。 .foo总共有3个类，第三个类是与我的下拉列表中的可能值匹配的类。我从其他一些Stack Overflow答案中收集的代码可以很好地在下拉列表中选择一个值，但是无论是否隐藏，它始终会使用.foo来选择第一个div。

我的代码：

$(document).ready(function () { 
   var $allClasses = $(".foo").attr('class').split(' ');
   for(var i=0; i < $allClasses.length; i++) {

   var selected = $allClasses[2];
   $("#bar").val( selected );    
 }

});

我尝试在设置$ allClasses变量时将.visible添加到.foo，但它仅返回“ Uncaught TypeError：无法读取未定义的属性'split'”。

谢谢！

编辑：

很抱歉，以前没有包含此内容！因此，我实际上是从WordPress循环中填充html，而显示的是基于网站上的另一个下拉列表，但是我对此没有任何问题。偶然将它们称为div，但实际上是标题。

查询将循环浏览帖子，并为每个帖子创建一个标题，大致如下：

<h3 class="foo second targetvalue1" style="display:none">My Heading 1</h3>
<h3 class="foo second targetvalue2" style="display:none">My Heading 2</h3>
<h3 class="foo second targetvalue3" style="display:none">My Heading 3</h3>

它们都以display：none开头，我有一些JavaScript可以根据Cookie值使它可见（可以正常工作）。

然后这是下拉列表的代码。这也是从WordPress循环中填充的，但是html本身看起来像这样：

<select name="bar" id="bar">
    <option disabled selected value="noselection">Select an option</option>
    <option value="targetvalue1">Target Value 1</option>
    <option value="targetvalue2">Target Value 2</option>
    <option value="targetvalue3">Target Value 3</option>
</select>

所以说当前可见的标题是带有targetvalue2类的标题，那么它应该从下拉列表中自动选择Target Value 2。

Answer 1

这应该可以解决问题，基本上，您选择foo类，其样式与display:none;不同（使用jquery的not equal selector），这使您可以选择未隐藏，因此您可以获取其名称以使其默认为选中状态：

$(document).ready(function () { 
    var displayedElement = $('.foo[style!="display:none"]').attr('class').split(' ');
    var classToSelect = displayedElement[2];   
    $("#bar").val( classToSelect );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="foo second targetvalue1" style="display:none">My Heading 1</h3>
<h3 class="foo second targetvalue2" style="display:block">My Heading 2</h3>
<h3 class="foo second targetvalue3" style="display:none">My Heading 3</h3>

<select name="bar" id="bar">
    <option disabled selected value="noselection">Select an option</option>
    <option value="targetvalue1">Target Value 1</option>
    <option value="targetvalue2">Target Value 2</option>
    <option value="targetvalue3">Target Value 3</option>
</select>

如何在可见元素上基于类设置下拉值？

1 个答案: