JQuery zeigt nur den ersten Wert

Question

Ich habe Funktion in meinem JQuery, die Wert in #product_detail mit Daten-Name = Wert füllen wird, zum ersten Mal war es Erfolg, wenn ich zum zweiten Mal versuchte, es zeigen nur den ersten Wert, auch wenn ich inspiziere elemen in datenname ist zweiter Wert.

Hier ist mein HTML-Code:

// here's my button that to alert 
 
function fillspan(productname) { 
 
    $("#product_detail").attr("data-name", productname); 
 
} 
 

 
//the problem 
 
function showitems() { 
 
    var name = $("#product_detail").data("name"); 
 
    alert(name); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select onchange="fillspan(this.value)"> 
 
    <option value="value1">Value1</option> 
 
    <option value="value2">Value2</option> 
 
</select> 
 

 
<span id="product_detail"></span> 
 

 
<button onclick="showitems()">Click</button>

Answer 1

verwenden können, wenn ich Ihren Punkt hast du diese verwenden können Code .. Verwenden Sie 10 Ereignis statt onchange Attribut und ändern Sie $("#product_detail").attr("data-name", productname); zu $("#product_detail").data("name", productname);

Hinweis: onchange="fillspan(this.value)" wird auch statt change Veranstaltung arbeiten, aber es wird nicht eine Chance geben, die Daten Attribut onload zu aktualisieren (ich es nicht versucht haben, bevor so dass diese über sie meine persönlichen Daten ist)

$(document).ready(function(){ 
 
    $('select').on('change' , function(){ 
 
     var get_Value = $(this).val(); 
 
     fillspan(get_Value); 
 
    }).change(); // by adding .change() here this will make the change event run onload .. if no need to run it onload you can remove it 
 
}); 
 

 

 
// here's my button that to alert 
 
function fillspan(productname) { 
 
    $("#product_detail").data("name", productname); 
 
} 
 

 
//the problem 
 
function showitems() { 
 
    var name = $("#product_detail").data("name"); 
 
    alert(name); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select> 
 
    <option value="value1">Value1</option> 
 
    <option value="value2">Value2</option> 
 
</select> 
 

 
<span id="product_detail"></span> 
 

 
<button onclick="showitems()">Click</button>

Answer 2

Um die Daten-Namen '#product_details' erhalten Sie $("#detail_product").attr("data-name");