简体   繁体   中英

filter select by option value jquery

Im trying to trigger options for a select from another select.

Now I want to check if my options contains the exact value of ex "5" and not also choose "15" and "25" as it does today, because both 15 (1->5<-) and 25 (2->5<--) contains 5 aswell..

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');       
}

These options is custom variations in woocommerce that i've made to set the price of a product depending on how much text you write in a textarea. Some of my options.length returns 0, even though I can see them in the select. It's like woocommerce don't understand that they are options.

Does anyone know something that can help me? :)

Here is a screenshot

this is the HTML for my variations-select

<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>
if($("#pa_height option[value='"+height+"']").length>0) {
//
}

You can rule out 15 / 25 / 35 etc by restricting your search to 1 character long strings. Then by looking for the number 5, you should get your expected results. Eg;

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!');
    }
  }
}

Update

Now that I've seen your HTML (after your edit), the above probably won't work. You may be able to modify the method to check if '5' is the first character. If it is, check if it is followed by another number. If it is not, then you've found your number 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
    }
  }
} 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM