选择新的下拉选项后要获取重复值？

Question

我遇到了一个问题，我从下拉菜单中进行选择，然后从下拉菜单中选择另一个选项，我先前选择的选项和新选择的选项具有相同的值。下面的代码是否有修复程序？请指教。非常感谢您的帮助。

这是我的代码：

$('.outputId').html(
 $("#eventname option:selected").text()
);

Hander logic: 
 $(document).ready(function () {

    $("#eventname").change(function () {
        $(".outputId").text($("#eventname option:selected").text())
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" for="eventname" name="eventname" id="eventname" data-val="true">
<option value="3e0ffa1d-c715-433c-b209-b6083bb43bf6" class="details" type="text">LeBron James</option>
<option value="3f66debb-a4f7-4c91-8bfc-a3fa62755f7d" class="details" type="text">Tester</option>
<option value="66653381-1009-4573-8d0e-640c57e94e5d" class="details" type="text">Jason Jones</option>
<option value="880c26f4-cb23-45ba-928b-50e9cd293c65" class="details" type="text">Sam Smith</option>

<div id="event">
<header></header>
<ul>
 <li>
  <p class="outputId"></p>   
 </li>   
</ul>
</div>

JS更新：

  $("#eventname").change(function () {
            $(".outputId").append('<li>' + $("#eventname option:selected").text() + '</li>')
        })

Answer 1

$('select#eventname').on('change',function(e){
    var l_strSelOpt = $(e.target).find('option[value="'+$(e.target).val() + '"]').html().trim();
    $('.outputId').html(l_strSelOpt);
});

上面的代码在您更改选择时执行。它提取选项的html，其值对应于select的值。最后一部分（从选定的选项中获取文本）可以通过多种方式完成，因此可以随时尝试。

Answer 2

$('#eventname').on('change', ()=>{
    $('.outputId').html(
       $("#eventname option:selected").text()
   );
})

Answer 3

尝试使用.append（）而不是.text（）

 $(document).ready(function () {
$("#eventname").change(function () {	
	$(".outputId").append($("#eventname option:selected").text())
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" for="eventname" name="eventname" id="eventname" data-val="true">
<option value="3e0ffa1d-c715-433c-b209-b6083bb43bf6" class="details" type="text">LeBron James</option>
<option value="3f66debb-a4f7-4c91-8bfc-a3fa62755f7d" class="details" type="text">Tester</option>
<option value="66653381-1009-4573-8d0e-640c57e94e5d" class="details" type="text">Jason Jones</option>
<option value="880c26f4-cb23-45ba-928b-50e9cd293c65" class="details" type="text">Sam Smith</option>
</select>
<div id="event">
<header></header>
<ul>
 <li>
  <p class="outputId"></p>   	`
 </li>   
</ul>
</div>

直接将
li元素附加到
ul列表项
 
$(document).ready(function () {
$("#eventname").change(function () {	
$(".outputId").append( '<li>' +$("#eventname option:selected").text() + '</li>')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" for="eventname" name="eventname" id="eventname" data-val="true">
<option value="3e0ffa1d-c715-433c-b209-b6083bb43bf6" class="details" type="text">LeBron James</option>
<option value="3f66debb-a4f7-4c91-8bfc-a3fa62755f7d" class="details" type="text">Tester</option>
<option value="66653381-1009-4573-8d0e-640c57e94e5d" class="details" type="text">Jason Jones</option>
<option value="880c26f4-cb23-45ba-928b-50e9cd293c65" class="details" type="text">Sam Smith</option>
</select>
<div id="event">
<header></header>
<ul class="outputId"></ul>
</div>
限制重复并显示消息弹出框>
 
$(document).ready(function () {
$("#eventname").change(function () {
let isDuplicate=false;
$('.outputId li').each(function(){
isDuplicate=$(this).text()==$("#eventname option:selected").text();
if	(isDuplicate)
{
return false;
}
})	
if($('.outputId li').length==0 || !isDuplicate){
$(".outputId").append( '<li>' +$("#eventname option:selected").text() + '</li>')
}
else{
alert('Duplicate Selected')
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" for="eventname" name="eventname" id="eventname" data-val="true">
<option value="3e0ffa1d-c715-433c-b209-b6083bb43bf6" class="details" type="text">LeBron James</option>
<option value="3f66debb-a4f7-4c91-8bfc-a3fa62755f7d" class="details" type="text">Tester</option>
<option value="66653381-1009-4573-8d0e-640c57e94e5d" class="details" type="text">Jason Jones</option>
<option value="880c26f4-cb23-45ba-928b-50e9cd293c65" class="details" type="text">Sam Smith</option>
</select>
<div id="event">
<header></header>
<ul class="outputId"></ul>
</div>

Answer 4