Добрый день. Столкнулся с проблемой, не могу проверить. На входе имеем следующую форму калькулятора:
<FORM Name="myform" class="calcform">
<SELECT NAME="width" onChange="calculatePrice()" id="width">
<OPTION value="20">20 см.</OPTION>
<OPTION value="30">30 см.</OPTION>
<OPTION value="40">40 см.</OPTION>
<OPTION value="50">50 см.</OPTION>
<OPTION value="60">60 см.</OPTION>
<OPTION value="70">70 см.</OPTION>
<OPTION value="80">80 см.</OPTION>
<OPTION value="90" style="display: inline-block;">90 см.</OPTION>
<OPTION value="100" style="display: inline-block;">100 см.</OPTION>
<OPTION value="110" style="display: inline-block;">110 см.</OPTION>
<OPTION value="120" style="display: inline-block;">120 см.</OPTION>
<OPTION value="130" style="display: inline-block;">130 см.</OPTION>
<OPTION value="140" style="display: inline-block;">140 см.</OPTION>
<OPTION value="150" style="display: inline-block;">150 см.</OPTION>
<OPTION value="160" style="display: inline-block;">160 см.</OPTION>
<OPTION value="170" style="display: inline-block;">170 см.</OPTION>
<OPTION value="180" style="display: inline-block;">180 см.</OPTION>
<OPTION value="190" style="display: inline-block;">190 см.</OPTION>
<OPTION value="200" style="display: inline-block;">200 см.</OPTION>
</SELECT>
<SELECT NAME="height" onChange="calculatePrice()" id="height">
<OPTION value="20">20 см.</OPTION>
<OPTION value="30">30 см.</OPTION>
<OPTION value="40">40 см.</OPTION>
<OPTION value="50">50 см.</OPTION>
<OPTION value="60">60 см.</OPTION>
<OPTION value="70">70 см.</OPTION>
<OPTION value="80">80 см.</OPTION>
<OPTION value="90" style="display: inline-block;">90 см.</OPTION>
<OPTION value="100" style="display: inline-block;">100 см.</OPTION>
<OPTION value="110" style="display: inline-block;">110 см.</OPTION>
<OPTION value="120" style="display: inline-block;">120 см.</OPTION>
<OPTION value="130" style="display: inline-block;">130 см.</OPTION>
<OPTION value="140" style="display: inline-block;">140 см.</OPTION>
<OPTION value="150" style="display: inline-block;">150 см.</OPTION>
<OPTION value="160" style="display: inline-block;">160 см.</OPTION>
<OPTION value="170" style="display: inline-block;">170 см.</OPTION>
<OPTION value="180" style="display: inline-block;">180 см.</OPTION>
<OPTION value="190" style="display: inline-block;">190 см.</OPTION>
<OPTION value="200" style="display: inline-block;">200 см.</OPTION>
</SELECT>
Стоимость:
<INPUT value="0" disabled="disabled" type="text" id="PicExtPrice" Size=8>грн.
</FORM>
Не получается реализовать код, чтобы при выборе в первом SELECT с id="width", option с value > 80 - во втором SELECT с id="height" все option с value > 80 прятать. И соответственно наоборот.
$(document).ready(function() {
$("select").on("change", function() {
var id = $(this).attr('id');
if ((id == 'height')) {
if ($("#height option:selected").val() > 80) {
$("#width option").each(function() {
if ($(this).val > 80) {
$(this).hide();
}
if ($("#width option:selected").val() > 80) {
if ($(this).val() == '80') {
$(this).prop("selected", 'selected');
}
}
});
} else {
$("#width option").each(function() {
$(this).show();
});
}
}
if ((id == 'width')) {
if ($("#width option:selected").val() > 80) {
$("#height option").each(function() {
if ($(this).val() > 80) {
$(this).hide();
}
if ($("#height option:selected").val() > 80) {
if ($(this).val() == '80') {
$(this).prop("selected", 'selected');
}
}
});
} else {
$("#height option").each(function() {
$(this).show();
});
}
}
});
});
Проблема в том, что скрипт работает только для первого селекта, если во втором выбрать значение > 80, то в первом ни один OPTION не будет прятаться.
А, пардон:
$("#width option").each(function() {
if ($(this).val > 80) { // missing () after val
Продвижение своими сайтами как стратегия роста и независимости