Изменить выбор на основе атрибута

Question

Я пытаюсь изменить select option на click, но я не хочу использовать option value. Мой код работает, если я даю свою кнопку value='3', но я хочу выбрать один с data-price="0", который в моем случае - с value='3'.

JS:

jQuery(document).ready(function() { 
    jQuery('#sample-addtocart-button').click(function(){ 
     jQuery('.product-custom-option').val(jQuery(this).attr('value')); 
    }); 
}); 

Html:

<button value="0" id="sample-addtocart-button" type="button">Free</button> 

<select class="product-custom-option"> 
    <option value="">-- Please Select --</option> 
    <option data-price="10" value="1">£10.00</option> 
    <option data-price="20" value="2">£20.00</option> 
    <option data-price="0" value="3">FREE</option> 
</select> 

Любая помощь будет оценена

Answer 1

Вы можете использовать attribute equals selector, чтобы получить возможность, а затем выберите пункт, установив selected используя prop() метод.

jQuery(document).ready(function() { 
 
    jQuery('#sample-addtocart-button').click(function() { 
 
    jQuery('.product-custom-option option[data-price="' + jQuery(this).attr('value') + '"]').prop('selected', true); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button value="0" id="sample-addtocart-button" type="button">Free</button> 
 

 
<select class="product-custom-option"> 
 
    <option value="">-- Please Select --</option> 
 
    <option data-price="10" value="1">£10.00</option> 
 
    <option data-price="20" value="2">£20.00</option> 
 
    <option data-price="0" value="3">FREE</option> 
 
</select>

Answer 2

Вы можете выбрать элементы по атрибуту, а затем установите selected свойство на элементе.

jQuery(document).ready(function() { 
    jQuery('#sample-addtocart-button').click(function(){ 
     jQuery('.product-custom-option [data-price=' + this.value + ']').prop("selected", true); 
    }); 
}); 

Выбирает элемент с data-price атрибута равно значению this.value, который является потомком .product-custom-option, и устанавливает его свойство selected к true.

---

Без JQuery, он может выглядеть следующим образом:

document.addEventListener("DOMContentLoaded", function() { 
    document.querySelector('#sample-addtocart-button').addEventListener("click", function(){ 
    document.querySelector('.product-custom-option [data-price=' + this.value + ']').selected = true; 
    }); 
}); 

---

И несколько вспомогательных методов всегда помогает с многословием:

function listen(el, typ, fn, cap) { 
    el && el.addEventListener(typ, fn, cap) 
} 
function query(el, sel) { 
    if (typeof el === "string") { 
    sel = el; 
    el = document; 
    } 
    return el.querySelector(sel) 
} 

listen(document, "DOMContentLoaded", function() { 
    listen(query('#sample-addtocart-button'), "click", function(){ 
    query('.product-custom-option [data-price=' + this.value + ']').selected = true; 
    }); 
}); 

Answer 3

Попробуйте это:

jQuery('#sample-addtocart-button').click(function(){ 
     var val= jQuery(this).attr('value'); 
     jQuery('.product-custom-option option[data-price='+val+']').prop('selected', true); // it will find the select option with certain data-price and make it selected 
});