JQueryのみ最初の値を表示

Question

#product_detailの値をdata-name = valueで満たすJQuery関数があります。これは2度目の試行で初めて成功しました。検査しても最初の値しか表示されませんデータ名の要素は2番目の値です。

ここに私のHTMLコードがあります：

// 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

を使用することができます '#product_details' のデータ名を取得するにはコード.. onchange属性の代わりにchangeイベントを使用してください。$("#product_detail").attr("data-name", productname);〜$("#product_detail").data("name", productname);

注：onchange="fillspan(this.value)"は同様の代わり changeイベントを動作しますが、それはあなたのデータ 属性のonloadを更新する機会を与えることはありません（ので、これはそれについての私の個人情報である前に、私はそれを試していませんでした）

$(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

あなたは私はあなたのポイントを得た場合は、これを使用することができます$("#detail_product").attr("data-name");