根据选择值中的匹配字段将类添加到元素 [英] Add class to elements based on matching field from select value

问题描述

我目前正在开发一个客户端项目，其中有一个属性列表。像这样：

 < div class =property> 
< h2>物业名称< / h2> 
< span>0 -  1,500平方英尺< / span> 
< / div> 
  

每个房产都有'可用空间（sq ft）'。我还有一个包含所有可用空间选项的选择框，如下所示：

 < select id =selectListname = field_53c53945dcb87\" > 
< option value =1500>0 -  1,500平方英尺< / option> 
< option value =3000>1,500 -  3,000平方英尺< / option> 
< option value =5000> 3,000  -  5,000平方英尺< / option> 
< option value =10000> 5,000  -  10,000 sq ft< / option> 
 <选项值=20000> 10,000  -  20,000平方英尺< / option> 
< / select> 
  

我想为选中的所有属性添加一个selected类值。我的jQuery到目前为止是：

$ p $ （function（$）{
$（document）.ready（function（） {
//创建一个包含当前所选项目的变量
var currentSelection = $（'＃selectList：selected'）。val（）;
//查找包含变量
的所有元素//将类添加到包含变量
$（'div：contains（'+ currentSelection +'）'）。addClass（'selected'）;
}）;
} ）（jQuery的）;


任何想法为什么当前不会将该类添加到具有所选值的div？

在此先感谢您，
Marc

---

更新 h3>

@ billyonecan的JS小提琴在这里显示我正在寻找的答案。谢谢！ http://jsfiddle.net/DMFLY/3

解决方案

第一个问题是，当您尝试连接 currentSelection 变量时，您的引号错误：

  $（'div：contains（'+ currentSelection +'）'）。addClass（'selected'）; 
  

第二个是所选选项的值匹配div中的文本，所以上面的选择器永远不会返回元素。由于您的代码是当前的，您可以使用选定的选项的文本：

  var currentSelection = $（'＃selectList option：selected' ）。文本（）; 
  

至于在选择其他选项时移除类，只需附加更改处理程序的选择，并让它为你工作：

  $（'＃selectList '）.on（'change'，function（）{
 var selected = $（this）.find（'option：selected'）。text（）; 
 
 $（'。属性'）。removeClass（'selected'）
 .filter（'：contains（'+ selected +'）'）。addClass（'selected'）; 
}）。change（）; 
  

这是一个小提琴

I'm currently working on a client project where I have a list of properties. Like this:

<div class="property">
<h2>Property Name</h2>
<span>0 – 1,500 sq ft</span>
</div>

Each property has a 'space available (sq ft)'. I also have a select box containing all the available space options like this:

<select id="selectList" name="field_53c53945dcb87">
    <option value="1500">0 – 1,500 sq ft</option>
    <option value="3000">1,500 – 3,000 sq ft</option>
    <option value="5000">3,000 – 5,000 sq ft</option>
    <option value="10000">5,000 – 10,000 sq ft</option>
    <option value="20000">10,000 – 20,000 sq ft</option>
</select>

I would like to add a class of 'selected' to all of the properties that have the currently selected value. My jQuery so far is:

(function($){
    $(document).ready(function(){
        // Create a variable with current selected item
        var currentSelection = $('#selectList :selected').val();
        // Find all elements containing variable
        // Add class to all elements containing variable
        $('div:contains('" + currentSelection + "')').addClass('selected');
    });
})(jQuery);

Any ideas why this is currently not adding the class to the divs with the selected value?

Thanks in advance, Marc

---

Update

@billyonecan's JS Fiddle here shows the answer I was looking for. Thanks! http://jsfiddle.net/DMFLY/3

解决方案

The first issue is that you have your quotes the wrong way around when trying to concatenate the currentSelection variable:

$('div:contains("' + currentSelection + '")').addClass('selected');

The second is that the selected option's value does match match up with the text in the div, so the above selector will never return an element. As your code is currently, you could use the selected option's text:

var currentSelection = $('#selectList option:selected').text();

As for removing the class when another option is selected, just attach a change handler to the select, and let that do the work for you:

$('#selectList').on('change', function() {
    var selected = $(this).find('option:selected').text(); 

    $('.property').removeClass('selected')
                  .filter(':contains("' + selected + '")').addClass('selected');
}).change();

Here's a fiddle

这篇关于根据选择值中的匹配字段将类添加到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！