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ę.

0
James Ong 20 listopad 2019, 11:56
Jeśli działa na twoich skrzypcach, ale nie w twojej witrynie, spróbuj sprawdzić konsolę pod kątem błędów.
 – 
Carsten Løvbo Andersen
20 listopad 2019, 11:59
Moja konsola nie wyświetla żadnych komunikatów o błędach.
 – 
James Ong
20 listopad 2019, 12:01
Czy możesz spróbować dodać to console.log("test") zaraz po $(function() { i czy widzisz to w swojej konsoli?
 – 
Carsten Løvbo Andersen
20 listopad 2019, 12:08
Tak, widzę komunikat w konsoli.
 – 
James Ong
20 listopad 2019, 12:10
James spróbuj console.log($().jquery;) to powinno powiedzieć, jaka wersja jquery jest załadowana, aby potwierdzić, że jquery załadowało się poprawnie
 – 
Carsten Løvbo Andersen
20 listopad 2019, 12:11

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>

0
Srimoyee Sen 20 listopad 2019, 12:00
Jeśli jquery nie został załadowany poprawnie, zwróci błąd podczas sprawdzania kodu.
 – 
Carsten Løvbo Andersen
20 listopad 2019, 12:12

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>
0
Jbadminton 20 listopad 2019, 12:26
Umieściłem bibliotekę jQuery na moim tagu head
 – 
James Ong
20 listopad 2019, 12:00
Dodałem 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.
 – 
James Ong
20 listopad 2019, 12:05
Czy to cały twój kod, czy używasz więcej bibliotek?
 – 
Jbadminton
20 listopad 2019, 12:06
Czy Twoja przeglądarka wyłączyła JavaScript? możesz to sprawdzić?
 – 
Jbadminton
20 listopad 2019, 12:18

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>
0
20 listopad 2019, 17:45