篩選按選項值選擇的jquery

Question

我試圖觸發一個選擇從另一個選擇的選項。

現在，我要檢查我的選項是否包含ex“ 5”的確切值，而不是像今天一樣選擇“ 15”和“ 25”，因為15（1-> 5 <-）和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中的自定義變體，我根據您在文本區域中寫入的文本量來設置產品價格。 我的一些options.length返回0，即使我可以在select中看到它們。 就像woocommerce不了解它們是選項。

有人知道有什么可以幫助我的嗎？ :)

這是截圖

這是我的變體選擇的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>

Answer 1

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

Answer 2

您可以通過將搜索限制為1個字符長的字符串來排除15/25/35等。 然后，通過查找數字5，您應該獲得預期的結果。 例如;

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（在您進行編輯之后），那么上面的代碼可能就行不通了。 您可能可以修改方法以檢查“ 5”是否為第一個字符。 如果是，請檢查其后是否有另一個數字。 如果不是，那么您已找到號碼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
    }
  }
}