JQuery는 첫 번째 값만 표시합니다.

Question

#product_detail의 값을 데이터 이름 = 값으로 채우는 JQuery 함수가 있습니다. 두 번째 시도에서 처음 시도했을 때 처음으로 값을 검사 할 때만 첫 번째 값만 표시합니다. data-name에있는 elemen은 두 번째 값입니다.

// 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'의 데이터 이름을 얻으려면 :

여기 내 HTML 코드입니다 코드 .. onchange 대신 change 이벤트를 사용하십시오. $("#product_detail").attr("data-name", productname); ~ $("#product_detail").data("name", productname);

참고 : onchange="fillspan(this.value)"뿐만 아니라 대신 의 작동 change 이벤트는하지만, 그것은 당신에게 데이터 속성 온로드 (를 업데이트 할 수있는 기회를 제공하지 않습니다 그래서 이것은 그것에 대해 내 개인 정보 전에 나는 그것을 시도하지 않았다)

$(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");