Question

需要帮助或指出正确的方向选择下拉菜单中的特定字词。

例如，如果选择了选项1 - “Team1”vs“Team4”，则从第二个下拉列表中删除“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').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;
}

在下拉选项中的多个单词中选择特定的一个单词

1 个答案: