select选项过滤不正常

Question

我试图过滤掉不包含相同文本的其他值

如果日志控制台，那么我可以看到有5次-1一次6次，然后3次-1再次

所以6表示找到了，但没有选择。

let n = $('#change_service_booked').find(':selected').data('prefix'); //KO
let t = $('.booked-appointment-details > .appointment-title').text(); //Prime Studio
let a = t+' - #'+n; // Prime Studio - #KO
console.log(a)
//in select option I have $450 - Prime Studio - #KO but it won't select
let titleValue = $(".field-paid-service-select option").filter((i, e) => {
console.log(e.innerHTML.indexOf(a)); // 5 -1 // 6 // 3 -1
return e.innerHTML.indexOf(a) > -1;
}).val();
$(".field-paid-service-select").val(titleValue).attr("disabled", true);
//$(".field-paid-service-select").find('option').not(':selected').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="change_service_booked">
<option class="level-0" data-prefix="SP" selected="selected">Party</option>
<option class="level-0" data-prefix="KO">Schools</option>
<option class="level-0" data-prefix="EV">Business</option>
</select>
<div class="booked-appointment-details">
<p class="appointment-title">Tallinna Ülikooli nutistuudio</p>
</div>
<select data-calendar-id="0" class="field-paid-service-select" name="paid-service-label---4681606">
<option value>Select a Product</option>
<option value="1860">330 € - TalTech leiutajate stuudio – #SP</option><option value="1858">330 € - Tallinna Ülikooli nutistuudio – #SP</option><!-- Superangeli Stuudio – #SP --><option value="1859">330 € - Superangeli Stuudio – #SP</option><!-- Tartu Ülikooli Avastuudio – #SP --><option value="1857">330 € - Tartu Ülikooli Avastuudio – #SP</option><!-- TalTech leiutajate stuudio – #EV --><option value="1856">480 € - TalTech leiutajate stuudio – #EV</option><!-- Tallinna Ülikooli nutistuudio – #EV --><option value="1855">480 € - Tallinna Ülikooli nutistuudio – #EV</option><!-- Superangeli Stuudio – #EV --><option value="1854">480 € - Superangeli Stuudio – #EV</option><!-- Tartu Ülikooli Avastuudio – #EV --><option value="1853">480 € - Tartu Ülikooli Avastuudio – #EV</option><!-- TalTech leiutajate stuudio – #KO --><option value="1852">250 € - TalTech leiutajate stuudio – #KO</option><!-- Tallinna Ülikooli nutistuudio – #KO --><option value="1851">250 € - Tallinna Ülikooli nutistuudio – #KO</option><!-- Superangeli Stuudio – #KO --><option value="1841">250 € - Superangeli Stuudio – #KO</option><!-- Tartu Ülikooli Avastuudio – #KO --><option value="1758">250 € - Tartu Ülikooli Avastuudio – #KO</option>       </select>

Answer 1

OK不确定这是否是您想要实现的?如果我偏离了轨道，请告诉我。

我的代码可能不是最有效的方式来实现条件逻辑上的选择选项，但我的回答可能会得到反馈和更好的答案张贴你的问题:-)

查看代码中的注释以了解发生了什么。

// on ready
$(function() {
// get our current change service booked selected prefix from option data attr
let prefix = $('#change_service_booked').find(':selected').data('prefix'); //KO

// show and hide field paid service select options based on current selected service booked option
show_hide_paid_service_select_options(prefix);
// on service booked select change via input event
$('#change_service_booked').on('input', function(e) {
// get new selected option data prefix
prefix = $(this).find(':selected').data('prefix');
// re run the show and hide field paid service select function passing our new prefix
show_hide_paid_service_select_options(prefix);
});
});
// show and hide field paid service select function passing prefix as first param
function show_hide_paid_service_select_options(prefix) {
// first option found default as true
let first_found = true;
// each field paid service select options (param i as index)
$('.field-paid-service-select option').each(function(i) {
// if the prefix chars and preceding hash # char match at the end of option text 
if (new RegExp(`#${prefix}$`).test($(this).text())) {

// if first option found
if(first_found) {

// log option text
console.log($(this).text());

// make this option selected using prop
$(this).prop('selected', true);

// set first option found to false
first_found = false;

}
// show matching option
$(this).show();
} else {

// hide matching option
$(this).hide();
}
});
}

SELECT {
display: block;
margin: 0 0 10px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="change_service_booked">
<option class="level-0" data-prefix="SP">Party</option>
<option class="level-0" data-prefix="KO" selected="selected">Schools</option>
<option class="level-0" data-prefix="EV">Business</option>
</select>
<select data-calendar-id="0" class="field-paid-service-select" name="paid-service-label---7876891">
<option value="">Select a Product</option>
<option value="17">$1777 - Ulikoli nutistudio - #EV</option>
<option value="18">$999 - Ulikoli Avastudio - #EV</option>
<option value="19">$2494 - Superangeli Studio - #EV</option>
<option value="12">$880 - Superangeli Studio - #SP</option>
<option value="13">$450 - Prime Studio - #KO</option>
<option value="14">$750 - Ulikoli nutistudio - #SP</option>
<option value="15">$20 - Leiutajate studio - #SP</option>
<option value="16">$660 - Leiutajate studio - #EV</option>
</select>