[JS + HTML] 동적 datalist option 추가 + data-value 로 보이는 것과 다른 값 보내기

1. 동적으로 datalist option을 추가하기

HTML

<div>
	<input id="snack" name="snack" list="snackList" type="text"/>
	<datalist id="snackList">
	</datalist>
	<input type="hidden" name="snack" id="snack-hidden">
</div>

JS

var snackData = {};

var snackListOpt = [];


//최초 설정
function addSnackOpt(){
	//response는 받아온 값
  response.forEach(function(res){
  		//data-value가 보낼 값, value가 보여질 값.
      var tmpStr = `<option data-value="${res.money}" value="${res.name}"></option>`
      snackListOpt.push(tmpStr);
  });
  $('#snackList').append(snackListOpt);


  $('#snackList option').each(function(i,el){
      snackData[$(el).data("value")] = $(el).val();
  });
}


//실제 전송할 때
function realValue(){
    var snackMoney = $('#snack').val().trim();
    snackMoney = $('#snackList [value="'+snackMoney+'"]').data('value');
    return snackMoney;
 }

 

삽질이 힘들었다.

 

 

[참고 블로그]

1. https://cbw1030.tistory.com/293

[JavaScript] select box에 동적으로 option을 추가해보자

2. http://jsfiddle.net/guest271314/j7ehtqjd/13/