JS PURE selezionato dati opzione attribuire valore restituisce null

Question

ho questo html:

<select onchange="check_status(this);" name="status[171]">  
    <option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option>  
    <option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option>  
    <option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option>  
    <option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option>  
</select>  

e js

function check_status(obj){  
    var uid = obj.getAttribute('data'); 
    alert(uid); 
} 

ma gli avvisi sempre nullo invece di valore dei dati Dov'è i ragazzi problematici? Grazie

Answer 1

Il problema è che si ottiene selezionare elemento e non selezionato elemento opzione come argomento di funzione.

function check_status(obj) { 
 
    var uid = obj.options[obj.selectedIndex].getAttribute('data'); 
 
    alert(uid); 
 
}

<select onchange="check_status(this);" name="status[171]"> 
 

 
    <option selected="true" value="open" data="04f2cf35e4d7a1c0158459fd0450a605">open</option> 
 
    <option value="in_process" data="04f2cf35e4d7a1c0158459fd0450a605">pending</option> 
 
    <option value="finished" data="04f2cf35e4d7a1c0158459fd0450a605">finished</option> 
 
    <option value="canceled" data="04f2cf35e4d7a1c0158459fd0450a605">canceled</option> 
 
</select>

Answer 2

Si sta tentando di ottenere l'attributo di dati selezionati, e non le opzioni.

Inoltre, posso vedere che tutti gli attributi di data sono identici. Quindi è possibile spostarlo dall'opzione per selezionare se stesso: <select onchange="check_status(this);" name="status[171]" data="04f2cf35e4d7a1c0158459fd0450a605" > e utilizzare il codice snippato dalla domanda non modificata.

function check_status(obj) { 
 
    var uid = obj.options[obj.selectedIndex].getAttribute('data'); 
 
    alert(uid) 
 
}

<select onchange="check_status(this);" name="status[171]"> 
 
    <option selected="true" value="open" data="open04f2cf35e4d7a1c0158459fd0450a605">open</option> 
 
    <option value="in_process" data="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option> 
 
    <option value="finished" data="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option> 
 
    <option value="canceled" data="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option> 
 
</select>

Answer 3

function check_status(obj){  
    var uid = obj.options[obj.selectedIndex].getAttribute('data'); 
    alert(uid); 
} 

Answer 4

si definiscono gli attributi personalizzati utilizzando l'attributo "dati". Nel tuo codice, non esiste un attributo custome che sono sicuro tu volessi che fosse un ID. Il formato esatto è "data-*", dove "*" viene sostituito con il nome dell'attributo personalizzato desiderato, quindi impostato sul valore di stringa desiderato. Quindi, nel codice, dovrebbe essere idealmente:

<select onchange="check_status(this);" name="status[171]"> 
    <option selected="true" value="open" data-id="open04f2cf35e4d7a1c0158459fd0450a605">open</option> 
    <option value="in_process" data-id="pending104f2cf35e4d7a1c0158459fd0450a605">pending</option> 
    <option value="finished" data-id="finished04f2cf35e4d7a1c0158459fd0450a605">finished</option> 
    <option value="canceled" data-id="canceled04f2cf35e4d7a1c0158459fd0450a605">canceled</option> 
</select> 

supponendo che si desidera l'usanza attributo da "id".

Ci sono due modi per recuperare il valore di "dati" attributi utilizzando puro JavaScript: oltre alla buona vecchia moda get/setAttribute(), è inoltre possibile accedere utilizzando la proprietà "dataset" dell'elemento

Utilizzando getAttribute del DOM (a) proprietà

function check_status(obj) { 
     var myoption = obj.options[obj.selectedIndex]; 
     var uid = myoption.getAttribute('data'); 
     alert(uid); 
     // setting and removing the data-id attribute 
     myoption.setAttribute("data-id", "foo") //changes "data-id" to "foo" 
     myoption.removeAttribute("data-id") //removes "data-id" attribute entirely 
} 

Utilizzando proprietà set di dati di JavaScript

function check_status(obj) { 
     var myoption = obj.options[obj.selectedIndex]; 
     var uid = myoption.dataset.id; 
     alert(uid); 
     var statusId = myoption.dataset["id"] 
     alert(statusId); 
}