该功能在页面加载时有效，但在单击时不起作用

Question

 var names = []; $(document).ready(function(){ $('#selauth option').each(function(){ names.push($(this).text()); }); }); function givemefirst() { $('.pmarked').removeClass('pmarked'); $('.postitle').eq(0).addClass('pmarked'); givemestuff(); } givemefirst(); function givemestuff() { let obj = $('.pmarked'); $('.optemp').remove(); let auth = obj.attr('data-auth'); if (names.includes(auth)) { $('#selauth').val(auth); } else { $('#selauth').append("<option class='optemp'>" + auth + "</option>"); $('#selauth').val(auth); } } $(document).on('click', '.postitle', function() { $('.pmarked').removeClass('pmarked'); $(this).addClass('pmarked'); givemestuff(); }); 

 .postitle{ cursor:pointer; } .pmarked{ background:gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='postitle' data-auth='earth'>lorem ipsum</div> <div class='postitle' data-auth='moon'>lorem ipsum</div> <div class='postitle' data-auth='sun'>lorem ipsum</div> <br> <select id='selauth'> <option>moon</option> <option>sun</option> </select> 

在页面加载时一切正常。
即， option-earth已添加到selauth ，并且已自动选择。

单击下一个postitle也会起作用- option-earth已删除...

但是，再次单击第一个postitle - selauth为空白，即未选择任何选项，即未添加option-earth ！

怎么了？

Answer 1

您只需要将其更改为：

演示： https : //codepen.io/creativedev/pen/RJYapd

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
  $('.optemp').remove();
    let auth = obj.attr('data-auth');  
    if ($("#selauth option[value='"+auth+"']").length > 0) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp' value='"+auth+"'>" + auth + "</option>");
        $('#selauth').val(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});

Answer 2

如果从select中删除任何临时选项，则还需要从数组names删除它。 因此，我有条件地从数组names删除了temp选项值：

if($('.optemp').length == 0){   
    names.splice(names.indexOf(auth), 1 );
}

 var names = []; $(document).ready(function(){ $('#selauth option').each(function(){ names.push($(this).text()); }); }); function givemefirst() { $('.pmarked').removeClass('pmarked'); $('.postitle').eq(0).addClass('pmarked'); givemestuff(); } givemefirst(); function givemestuff() { let obj = $('.pmarked'); let auth = obj.attr('data-auth'); if($('.optemp').length == 0){ names.splice(names.indexOf(auth), 1 ); } $('.optemp').remove(); if (names.includes(auth)) { $('#selauth').val(auth); } else { $('#selauth').append("<option class='optemp'>" + auth + "</option>"); $('#selauth').val(auth); } } $(document).on('click', '.postitle', function() { $('.pmarked').removeClass('pmarked'); $(this).addClass('pmarked'); givemestuff(); }); 

 .postitle{ cursor:pointer; } .pmarked{ background:gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='postitle' data-auth='earth'>lorem ipsum</div> <div class='postitle' data-auth='moon'>lorem ipsum</div> <div class='postitle' data-auth='sun'>lorem ipsum</div> <br> <select id='selauth'> <option>moon</option> <option>sun</option> </select> 

Answer 3

您可以尝试对下面的代码进行很小的更改。

所做的更改-

1. 在函数Givemestuff（）中，请勿删除$（。optemp）。 仅删除课程。
2. 在同一函数的else部分下，将auth推送到names数组中。

使用此代码，您可以自由地在select元素下仅添加必需的选项 。

让我知道进一步的查询。

var names = [];
$(document).ready(function(){
    $('#selauth option').each(function(){
        names.push($(this).text());
    });
});

function givemefirst() {
    $('.pmarked').removeClass('pmarked');
    $('.postitle').eq(0).addClass('pmarked');
    givemestuff();
}

givemefirst();

function givemestuff() {
    let obj = $('.pmarked');
        $('.optemp').removeClass('optemp');
    let auth = obj.attr('data-auth');
    if (names.includes(auth)) {
        $('#selauth').val(auth);
    }
    else {
        $('#selauth').append("<option class='optemp'>" + auth + "</option>");
        $('#selauth').val(auth);
                names.push(auth);
    }
}

$(document).on('click', '.postitle', function() {
    $('.pmarked').removeClass('pmarked');
    $(this).addClass('pmarked');
    givemestuff();
});

.postitle{
cursor:pointer;
}

.pmarked{
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='postitle' data-auth='earth'>lorem ipsum</div>
<div class='postitle' data-auth='moon'>lorem ipsum</div>
<div class='postitle' data-auth='sun'>lorem ipsum</div>
<br>
<select id='selauth'>
<option>moon</option>
<option>sun</option>
</select>