Archive for: 𔃲月 2019’

select プルダウンの書き換え

2019年2月18日 Posted by PURGE

3年に1度は必ず実装する必要がある技術。
覚え書きです。

<html>
<head>
<title>JS</title>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
    </script>
</head>
<body>

<select name="item" id="item">
    <option value="">りんご</option>
    <option value="">イチゴ</option>
    <option value="">バナナ</option>
</select>

<script>
    $(function(){
        $('#item').change(function(){
            $.ajax({	
        		url:"/data.json",
        		type:"POST",
                data:$("#form1").serialize(),
		        dataType:"json",
		        timespan:1000
    		}).done(function(data1,textStatus,jqXHR) {
				console.log(jqXHR.status);
				console.log(textStatus);

                console.log(data1);
                console.log(data1["data"][0].name);
				
                var data2 = JSON.stringify(data1);
				console.log(data2); 
				
                var data3 = JSON.parse(data2);
				console.log(data3);

                $("#item option").remove();
                $("#item").append("<option></option>");
                $.each(data3["data"], function(key, value){
                    console.log(key + ':' + value);
                    $("#item").append($("<option>").val(value.id).text(value.name));
                });
            }).fail(function(jqXHR, textStatus, errorThrown ) {
                console.log(jqXHR.status);
                console.log(textStatus);
                console.log(errorThrown);
                console.log('Failed');
            }).always(function(){
                console.log("complete");
            });
        });
    });
</script>
</body>
</html>
{"data" : [
    {
        "id" : "1",
        "name" : "太郎",
        "age" : "12"
    },
    {
        "id" : "2",
        "name" : "花子",
        "age" : "14"
    },
    {
        "id" : "3",
        "name" : "金太郎",
        "age" : "32"
    },
    {
        "id" : "4",
        "name" : "桃太郎",
        "age" : "47"
    },
    {
        "id" : "5",
        "name" : "赤太郎",
        "age" : "23"
    }
]}