Select 下拉选项中多个词中的特定一个词

Question

需要帮助或在正确的方向指出下拉列表中的 select 个特定词。

例如，如果选项 1 - "Team1" vs "Team4" 是 selected，请从第二个下拉列表中删除 "Team2" 和 "Team3"。

<select id="gameDrop">
    <option value="1">Team1 vs Team4</option>
    <option value="2">Team2 vs Team3</option>
    <option value="3">Team3 vs Team2</option>
    <option value="4">Team4 vs Team1</option>
</select>

<select id="teamDrop">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

有什么方法可以将以下代码扩展到 select 个特定的词而不是下拉列表中的选项值？

$('select').change(function() {
    $('select').not(this).children('option[value=' + $(this).val() + ']').remove();
});

Answer 1

怎么样this

HTML

<select id="gameDrop">
    <option value="1:4">Team1 vs Team4</option> // Please note that i have changed the values here
    <option value="2:3">Team2 vs Team3</option>
    <option value="3:2">Team3 vs Team2</option>
    <option value="4:1">Team4 vs Team1</option>
</select>

<select id="teamDrop">
    <option value="1">Team1</option>
    <option value="2">Team2</option>
    <option value="3">Team3</option>
    <option value="4">Team4</option>
</select>

jQuery

$('#gameDrop').change(function() {
    var $val = $(this).val();
    $val = $val.split(':');
    $('#teamDrop option').prop('disabled',true);
    $.each($val,function(index,value){
        $('#teamDrop option[value="'+value+'"]').prop('disabled',false);
    });
})

CSS [这很重要，因为它隐藏了不需要的选项]

select option[disabled] {
    display: none;
}

Select 下拉选项中多个词中的特定一个词

Select specific one word among multiple words in a dropdown option

jquery