Kiedy wybieram opcję w mojej witrynie internetowej, powinna ona ostrzegać o wartości opcji, ale w tej sytuacji wartość nie jest ostrzegana.
Jednak kiedy wypróbowałem to w JSFiddle, działa.
Używam jQuery 3.4.1 z ładowaniem jQuery w tagu head.
Mój plik skryptu javascript znajduje się na dole tagu body
Kod HTML
<div class = 'custom-select'>
<select id = 'choice'>
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>
Kod JavaScript
$(function() {
$('#choice').change(function() {
alert($('#choice option:selected').text());
});
});
Proszę o poradę, czego mi brakuje lub co robię źle, dziękuję.
3 odpowiedzi
Sprawdź, czy masz Jquery zawarte w html. Dodałem i zadziałało. Spróbuj dodać
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Twój kod działa.
1. Sprawdź konsolę pod kątem błędów.
2. Sprawdź, czy jest to pierwszy dołączany skrypt.
3. Sprawdź, czy w Twojej przeglądarce jest włączony JavaScript.
Opcja 1 z jquery:
$(function() {
$('#choice').change(function() {
alert($('#choice option:selected').text());
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = 'custom-select'>
<select id = 'choice'>
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>Opcja 2 bez jquery:
function alert_dropdown(value){
alert(value);
}<div class = 'custom-select'>
<select id = 'choice' onchange="alert_dropdown(this.value)">
<option value = ''></option>
<option value = 'one' selected>One</option>
<option value = 'two'>Two</option>
</select>
</div>head
console.log($('#choice option:selected').text());, ale nadal nie ma komunikatu w konsoli za każdym razem, gdy zmieniam zaznaczenie. Ale jeśli umieszczę kod poza .change, otrzymuję komunikat konsoli o wartości.
Jeśli zawartość jest dodawana dynamicznie, możesz spróbować następujących rozwiązań. Ponadto użyj val(), aby uzyskać opcję wyboru pola.
$(document).on('change', '#choice', (e) => {
alert($(e.target).val());
});
Jeśli zawartość nie jest dodawana dynamicznie, po prostu użyj:
$('#choice').on('change', (e) => {
alert($(e.target).val());
});
$(document).on('change', '#choice', (e) => {
alert($(e.target).val());
});<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
<select id='choice'>
<option value=''></option>
<option value='one'>One</option>
<option value='two'>Two</option>
</select>
</div>alert($("#choice > option:selected").val());
$("#choice").on("change", (e) => {
alert(($(e.target).val().length ? $(e.target).val() : "Select Something!"));
});<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class='custom-select'>
<select id='choice'>
<option value=''></option>
<option value='one' selected>One</option>
<option value='two'>Two</option>
</select>
</div>
console.log("test")zaraz po$(function() {i czy widzisz to w swojej konsoli?console.log($().jquery;)to powinno powiedzieć, jaka wersja jquery jest załadowana, aby potwierdzić, że jquery załadowało się poprawnie