Получить первый индекс выпадающего значения для всех событий в календаре?

Question

Я столкнулся с проблемой, когда я выбираю из раскрывающегося списка, а затем хочу выбрать другой вариант из раскрывающегося списка, я получаю то же значение при моем предыдущем выборе варианта и новом выбранном параметре. Есть ли исправление в моем коде ниже? пожалуйста, порекомендуйте. Спасибо большое за помощь.

Вот мой код:

 

$('.outputId').html(
        $("#eventname option:selected").text()
        
        );
   
    $('#eventname').prop('selectedIndex', 0);

<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 class="button">
       

 <input type="submit" id="but"/>
        </div>
<div id="event">
<header></header>
<ul>
 <li>
  <p class="outputId"></p>   
 </li>   
</ul>
</div>

Answer 1

Попробуйте использовать .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 2

У вас отсутствует тег </select>. Тогда вы можете использовать этот скрипт:

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

Answer 3

Вам необходимо связать change listener и изменить его.

Примечание: отсутствует </select> тег

$( "#eventname" ).change(function() {    
  $('.outputId').html($(this).find(":selected").text());
  $('.valueId').html($(this).val());
  $('.appendedVal').append(`<li>${$(this).find(":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">

<p class="outputId">test</p>  
<p class="valueId">value</p> 
<ul class="appendedVal"></ul>   
</div>

Answer 4

Если вы хотите, чтобы ваш выбор отображался в выходном div, вам нужно подключиться к событию изменения выбора:

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

Приведенный выше код выполняется при изменении выбора. Он тянет html опции, значение которой соответствует значению выбора. Последняя часть (получить текст из выбранной опции) может быть выполнена разными способами, поэтому не стесняйтесь экспериментировать с ней.