按选项值jquery过滤选择

时间:2016-02-23 11:20:11

标签: javascript jquery wordpress woocommerce

我试图从另一个选择中触发选择的选项。

现在我想检查我的选项是否包含ex" 5"的确切值。而不是选择" 15"和" 25"就像今天一样,因为15(1> 5&lt ;-)和25(2-> 5< - )都包含5个...

console.log(height); // e.g 5, 10, 15, 25, 30
if($('#pa_height').children('option').filter(':contains("'+height+'")')) {

    var option = height + 'cm-' + (typeof closestPrice[1] !== 'undefined' ? closestPrice[1] : closestPrice[0]) + 'kr';
    console.log('option exists', option);

    // some of my options gives me 1 here and other 0
   console.log($('#pa_hojd').children('option[value="'+option+'"]').length); 
   .if($('#pa_height').children('option[value="'+option+'"]').length !== 0) {
        $('#pa_height').children('option[value="'+option+'"]').attr('selected', 'selected').siblings().removeAttr('selected').trigger('change');
    }
    else {
        $('#pa_height').children('option').filter(':contains("'+height+'")').last().attr('selected', 'selected').siblings().removeAttr('selected').trigger('change');
        console.log('Highest price for this height is set, Price is: ', price);
    }
} else {
    console.log('Height is not set');       
}

这些选项是woocommerce中的自定义变体,我根据您在textarea中写入的文本数量来设置产品的价格。 我的一些options.length返回0,即使我可以在select中看到它们。就像woocommerce不明白他们是选择。

有谁知道可以帮助我的事情? :)

Here is a screenshot

这是我的变体的HTML - 选择

<select id="pa_height" class="" name="attribute_pa_hojd" data-attribute_name="attribute_pa_hojd">
    <option value="">Välj ett alternativ</option>
    <option value="5cm-79kr">5cm: 79kr</option>
    <option value="5cm-99kr">5cm: 99kr</option>
    <option value="5cm-199kr" selected="selected">5cm: 199kr</option>
    <option value="5cm-299kr">5cm: 299kr</option>
    <option value="5cm-399kr">5cm: 399kr</option>
    <option value="5cm-499kr">5cm: 499kr</option>
    <option value="10cm-149kr">10cm: 149kr</option>
    <option value="10cm-199kr">10cm: 199kr</option>
    <option value="10cm-299kr">10cm: 299kr</option>
    <option value="10cm-399kr">10cm: 399kr</option>
    <option value="10cm-499kr">10cm: 499kr</option>
    <option value="10cm-99kr">10cm: 99kr</option>
    <option value="15cm-129kr">15cm: 129kr</option>
    <option value="15cm-149kr">15cm: 149kr</option>
    <option value="15cm-249kr">15cm: 249kr</option>
    <option value="15cm-349kr">15cm: 349kr</option>
    <option value="15cm-449kr">15cm: 449kr</option>
    <option value="15cm-599kr">15cm: 599kr</option>
    <option value="20cm-150kr">20cm: 150kr</option>
    <option value="20cm-200kr">20cm: 200kr</option>
    <option value="20cm-250kr">20cm: 250kr</option>
    <option value="20cm-350kr">20cm: 350kr</option>
    <option value="25cm-450kr">25cm: 450kr</option>
    <option value="25cm-550kr">25cm: 550kr</option>
    <option value="25cm-700kr">25cm: 700kr</option>
    <option value="25cm-900kr">25cm: 900kr</option>
    <option value="30cm-1000kr">30cm: 1000kr</option>
    <option value="30cm-150kr">30cm: 150kr</option>
    <option value="30cm-200kr">30cm: 200kr</option>
    <option value="30cm-250kr">30cm: 250kr</option>
    <option value="30cm-350kr">30cm: 350kr</option>
    <option value="30cm-550kr">30cm: 550kr</option>
    <option value="30cm-750kr">30cm: 750kr</option>
    <option value="30cm-850kr">30cm: 850kr</option>
</select>

2 个答案:

答案 0 :(得分:0)

if($("#pa_height option[value='"+height+"']").length>0) {
//
}

答案 1 :(得分:0)

您可以通过将搜索限制为1个字符长的字符串来排除15/25/35等。然后通过查找数字5,您应该得到预期的结果。 E.g;

var options = document.getElementsByTagName('option');

for(var i = 0; i < options.length; i++){
  var option_value = options[i].value;
  var search_value 5;

  if(options_value.length < 1){
    // String length = 0(1). This rules out double or triple digit numbers

    if(options_value.indexOf(search_value) > -1){
      // Found the value 5

      console.log('Success!');
    }
  }
}

更新

现在我已经看过你的HTML(在你编辑之后),上面的内容可能不会起作用。您可以修改方法以检查是否&#39; 5&#39;是第一个角色。如果是,请检查是否后跟另一个号码。如果不是,那么您已经找到了您的号码5。

var options = document.getElementsByTagName('option');

for(var i = 0; i < options.length; i++){
  var option_value = options[i].value();
  var first_char = option_value.charAt(0);

  if(first_char == 5){
    // first char = 5, check second
    var second_char = option_value.charAt(1);

    if(isNaN(second_char)){
      // value is not 5
    }else{
      // not a number, found 5
      // do code
    }
  }
}