JavaScriptプログラムに関する各種メモ書き

input type="text" の 候補リストを JavaScript で動的に変更する

● input type="text" の 候補リストを JavaScript で動的に変更する

html

	<input type="" name="" list="my_datalist">
	<datalist id="my_datalist">
		<option value="aaa" label="テスト項目A"></option>
		<option value="bbb" label="テスト項目B"></option>
		<option value="ccc" label="テスト項目C"></option>
	</datalist>

javascript

    var dataList = document.getElementById('my_datalist');
    var jsonOptions = [
    	{
	        "value" : "123",
	        "label" : "テキスト1"
	    } ,
	    {
	        "value" : "456",
	        "label" : "テキスト2"
	    }
	];

    json_to_datalist( dataList , jsonOptions) ;

    function json_to_datalist( datalist_dom_obj , json) {
        if ( ! json ){ return; }
        json.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item.value;
            if( option.label ){ option.label = item.label; }

            datalist_dom_obj.appendChild(option);
        });
    }

No.1878
10/10 15:53

edit