HTML selezionare elemento onChange innescare per l'opzione già selezionata

ho il seguente codice HTML contenente un elenco a discesa (selezione singola)HTML selezionare elemento onChange innescare per l'opzione già selezionata

 <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#garden").bind('change', function() { 
        alert("Changed"); 
        }); 
      }); 
     </script> 
    <body> 
     <div id="content"> 
      <select id="garden"> 
      <option value="flowers">Flowers</option> 
      <option value="shrubs">Shrubs</option> 
      <option value="trees">Trees</option> 
      <option value="bushes">Bushes</option>     
      </select> 
     </div> 
    </body> 
</html>

Quando la pagina HTML è reso, Flowers è l'elemento già selezionato nella casella di riepilogo giù di default (essendo il primo). Se seleziono qualsiasi altro valore (diverso da "Fiori"), la funzione javascript viene attivata e viene visualizzata una casella di avviso contenente "Modificato".

Q1: Tuttavia, nel caso in cui venga nuovamente selezionato Flowers, l'evento onchange non viene attivato. Capisco che è perché nulla è stato 'cambiato' nell'elenco a discesa. C'è un modo in cui una funzione viene attivata anche quando non viene apportata alcuna modifica al valore già selezionato nel menu a discesa?

Q2: Come estrarre il valore dell'elemento che è stato appena selezionato (anche se non è stato selezionato nulla di nuovo, ovvero, l'utente ha fatto clic sul menu a discesa e ha fatto semplicemente clic da qualche altra parte).

Ho già provato il "onblur" ma ciò richiede che l'utente faccia clic in qualche altro punto del documento in modo che l'elenco a discesa perda lo stato attivo. Qualsiasi aiuto sarebbe molto apprezzato.

Grazie mille. [Ho modificato le intestazioni HTML e altri inclusioni di script nel frammento di codice fornito per brevità.]

fonte

2010-07-28 Shrey

Beh penso che non si vuole ricevere il 100%, ma alcune cose che posso suggerire qui sono:

associare un gestore di eventi click per il select

$("#garden").bind('click', function() { 
    alert($(this).find('option:selected').text()); 
});

associare un focusout evento gestore

$("#garden").bind('focusout', function() { 
    alert($(this).find('option:selected').text()); 
});

e naturalmente vincola il gestore di eventi change che hai già ricevuto. Il click event handler potrebbe essere un po 'complicato dal momento che si attiva ogni volta che si fa clic sull'elemento. Ma se non lo fai alert() ogni volta che non dovrebbe essere un problema, hai la selezione attuale e puoi farcela con quello che vuoi.

fonte

2010-07-28 15:31:40 jAndy

Wow, grazie. Funziona quasi perfettamente per me: D – Shrey

Domanda 1: Credo che l'evento per che sarebbe "onSelect".

Domanda 2: Penso che l'evento "onSelect" possa funzionare anche per quello, non sicuro al 100%. Qualcosa da provare almeno e con cui pasticciare.

fonte

2010-07-28 15:21:44

No, anche onselect non funziona :(. Infatti, onselect non viene nemmeno attivato per la selezione del menu a discesa, la selezione di alcune opzioni, il rilascio del mouse, il clic in qualsiasi altro punto del documento. (Scusate, sono un debuttante in javascript e HTML) – Shrey

È possibile attivare manualmente l'evento quando si carica la pagina:

$(document).ready(function() { 
    $("#garden").bind("change", function() { 
     // ... 
    }).change(); 
});

Questo riprenderà il valore iniziale - quindi credo che rende la vostra seconda domanda irrilevante. Questo non funzionerà in tutte le situazioni (spero che il tuo attuale gestore non sia un avviso ma in realtà qualcosa di utile!), Ma potrebbe tornare utile ...

fonte

2010-07-28 15:34:44 Jon

Hmm, questo è un suggerimento interessante. Tornerò dopo averlo provato. – Shrey

Sei sicuro che qualunque cosa tu stia facendo è il modo più ragionevole di fare le cose? Sembra che un'interfaccia utente molto strana abbia un comportamento diverso se selezioni un elemento lasciandolo come predefinito rispetto alla sua selezione aprendo la selezione e selezionando l'elemento attualmente selezionato.

Se vuoi farli esplicitamente scegliere i fiori allora forse vuoi una voce fittizia in alto che dice "Scegli uno" che significherà quindi che sono costretti a cambiare effettivamente i fiori se questo è ciò che vogliono. Probabilmente sarebbe più semplice che complicare il codice con più gestori di eventi e simili.

Se si ha realmente bisogno di seguire il percorso che si sta seguendo, si consiglia di considerare quale sia il comportamento se qualcuno si limita a controllare il controllo e quindi a passarlo. cioè dovrebbe sparare anche il tuo script?

Modifica per rispondere alle osservazioni a lungo:

Che cosa si vuole fare in questo caso è agganciare nel gestore onSubmit del modulo. Questo è chiamato, come puoi immaginare, quando il modulo viene inviato. Se il gestore restituisce false, il modulo non verrà inviato.

Questo gestore è tradizionalmente utilizzato per la convalida del lato client esaminando lo stato degli elementi del modulo che si interessano e controllando che i loro valori siano validi. In questo caso verificherai se il valore del giardino è "N/A" o qualsiasi altra cosa tu lo imposti e, in tal caso, fai apparire un avviso (nel caso più semplice) e, eventualmente, contrassegna i campi che richiedono attenzione. Quindi l'utente sceglierà una voce valida (si spera) e la volta successiva che la convalida avrà esito positivo, si restituirà true nel gestore e l'utente può essere contento di aver inviato un input valido.

Come sempre la dichiarazione di non responsabilità standard che qualsiasi dato può essere inviato al tuo server da un utente determinato, quindi non dovresti dare per scontato che hai avuto questa convalida che stai ricevendo dati validi sul server. :)

fonte

2010-07-28 15:37:22 Chris

In realtà, cosa Ho chiesto è stato solo perché stavo provando la gestione degli eventi prima di incorporare nella mia applicazione. Capisco che la situazione presente (default vs trigger di selezione esplicita basata su js) sia una cattiva interfaccia utente - e "sceglierne uno" è esattamente quello che voglio. è che l'utente può finire scegliendo "Per favore sceglierne uno", nel qual caso devo comunicargli che le tue azioni non sono valide (posso anche essere passivo) niente, ma non è questo il mio scopo). Un altro problema è, limitandolo a non selezionare "Per favore sceglierne uno" - qualche suggerimento su come farlo? – Shrey

@Shrey: ho risposto alla tua domanda nella mia risposta in modo che non si fosse inserito in un commento (che penso fosse comunque logn in ogni caso). – Chris

Grazie mille per la risposta. Questo ha senso e sembra la cosa più ovvia che avrei dovuto fare :) Grazie ancora. (Alzando il commento non posso fare lo stesso per "risposta" due volte). – Shrey

A mio parere, la soluzione più semplice è quella di duplicare la prima opzione in un elemento disattivato e nascosto con la stessa etichetta. Il tuo elenco a discesa mostrerà l'etichetta dell'opzione nascosta, ma non verrà quindi visualizzato nell'elenco.

<select id="garden" name="blabla" onchange="this.form.submit();" > 
    <option value="" disabled selected style="display:none;">Flowers</option> 
    <option value="flowers" >Flowers</option> 
    <option value="shrubs" >Schrubs</option> 
    <option value="trees" >Trees</option> 
    <option value="bushes" >Bushes</option> 
</select>

La tua domanda sembra uguale HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed e la soluzione citati sopra è stato fornito da Simon Aronsson.

Nota bene: la soluzione funziona perfettamente con Firefox, ma non con Internet Explorer.

fonte

2018-01-02 15:18:22 OuzoPower

HTML selezionare elemento onChange innescare per l'opzione già selezionata

risposta

Problemi correlati