该功能仅在页面加载时有效，而在点击时无效

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中删除了临时选项值：

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推入名称 数组。

使用此代码，您可以随意在 select 元素下仅添加必需的 option 。

让我知道进一步的查询。

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>