<div id="readability-page-1" class="page"><section id="container">

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-we6apVVPwuoDAazb"></ins>



            



            <div>
<p data-ke-size="size16"><span>선택한 강아지 종류에 따라 서브 종류와 이미지를 가져오도록 되어 있습니다. 위의 예제 코드를 실행하면 각 단계에서 옵션을 선택할 수 있고, 선택에 따라 다음 단계의 옵션이 동적으로 변경됩니다.</span></p>

<p data-ke-size="size16"><a href="https://dog.ceo/api/breeds" target="_blank" rel="noopener&nbsp;noreferrer">https://dog.ceo/api/breeds</a> 를 활용하여 3단계 동적 select 박스를 만든 예제 입니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="784" data-origin-height="796"><span data-url="https://blog.kakaocdn.net/dn/cy9q3n/btsEysc5AD3/eNjYOGd5ABn5UrAGMOGFd1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cy9q3n/btsEysc5AD3/eNjYOGd5ABn5UrAGMOGFd1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="579" height="588" data-origin-width="784" data-origin-height="796"></span></figure>


<pre id="code_1707299848404" data-ke-language="html" data-ke-type="codeblock"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Vue.js를 이용한 동적 드롭다운&lt;/title&gt;
    &lt;!-- Vue.js CDN 추가 --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;select name="step1" v-model="selectedStep1" v-on:change="fetchStep2Options"&gt;
            &lt;option value=""&gt;단계 1 선택&lt;/option&gt;
            &lt;option v-for="breed in breeds" :value="breed.id"&gt;{{ breed.name }}&lt;/option&gt;
        &lt;/select&gt;

        &lt;select name="step2" v-model="selectedStep2" v-on:change="fetchStep3Options" v-show="true"&gt;
            &lt;option value=""&gt;단계 2 선택&lt;/option&gt;
            &lt;option v-for="subBreed in subBreeds" :value="subBreed"&gt;{{ subBreed }}&lt;/option&gt;
        &lt;/select&gt;

        &lt;select name="step3" v-model="selectedStep3" v-show="true"&gt;
            &lt;option value=""&gt;단계 3 선택&lt;/option&gt;
            &lt;option v-for="image in images" :value="image"&gt;{{ image }}&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;&lt;br&gt;
        &lt;!-- 이미지를 보여주는 부분 --&gt;
        &lt;img v-if="selectedStep3" :src="selectedStep3" alt="선택된 이미지"&gt;
    &lt;/div&gt;

    &lt;script&gt;
        new Vue({
            el: '#app',
            data: {
                selectedStep1: '',
                selectedStep2: '',
                selectedStep3: '',
                breeds: [],
                subBreeds: [],
                images: []
            },
            methods: {
                async fetchStep1Options() {
                    const response = await fetch('https://dog.ceo/api/breeds/list/all')
                    const data = await response.json();
                    this.breeds = Object.keys(data.message).map(breed =&gt; ({
                        id: breed,
                        name: breed
                    }));
                    if (this.selectedStep1) {
                        this.fetchStep2Options();
                    }
                },
                async fetchStep2Options() {
                    this.images = []; // 이미지 초기화
                    if (this.selectedStep1) {
                        const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/list`)
                        const data = await response.json();
                        this.subBreeds = data.message;
                        if (!this.subBreeds.includes(this.selectedStep2)) {
                            this.selectedStep2 = '';
                            this.selectedStep3 = '';
                        } else {
                            this.fetchStep3Options();
                        }
                    } else {
                        this.selectedStep2 = '';
                        this.selectedStep3 = '';
                    }
                },
                async fetchStep3Options() {
                    this.images = [];
                    if (this.selectedStep2) {
                        const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/${this.selectedStep2}/images/random/10`)
                        const data = await response.json();
                        this.images = data.message;
                        if (!this.images.includes(this.selectedStep3)) {
                            this.selectedStep3 = '';
                        }
                    } else {
                        this.selectedStep3 = '';
                    }
                }
            },
            async mounted() {
                this.selectedStep1 = 'pointer';
                this.selectedStep2 = 'germanlonghair';
                this.selectedStep3 = 'https://images.dog.ceo/breeds/pointer-german/n02100236_3798.jpg';
                await this.fetchStep1Options();
            }
        });
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<figure data-ke-align="alignCenter"><a href="https://blog.kakaocdn.net/dn/ny2t4/btsEASISDb6/KkbIdk8ZgZk3Vt514c1Gok/vuejs.html?attach=1&amp;knm=tfile.html">
    
    <div><p><span>vuejs.html</span></p>
<p>0.00MB</p>
</div>
  </a></figure>
</div>
            




                    

                    



</section></div>

심재운 블로그

선택한 강아지 종류에 따라 서브 종류와 이미지를 가져오도록 되어 있습니다. 위의 예제 코드를 실행하면 각 단계에서 옵션을 선택할 수 있고, 선택에 따라 다음 단계의 옵션이 동적으로 변경됩니다.
 
https://dog.ceo/api/breeds 를 활용하여 3단계 동적 select 박스를 만든 예제 입니다.
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js를 이용한 동적 드롭다운</title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <select name="step1" v-model="selectedStep1" v-on:change="fetchStep2Options">
            <option value="">단계 1 선택</option>
            <option v-for="breed in breeds" :value="breed.id">{{ breed.name }}</option>
        </select>
        <select name="step2" v-model="selectedStep2" v-on:change="fetchStep3Options" v-show="true">
            <option value="">단계 2 선택</option>
            <option v-for="subBreed in subBreeds" :value="subBreed">{{ subBreed }}</option>
        </select>
        <select name="step3" v-model="selectedStep3" v-show="true">
            <option value="">단계 3 선택</option>
            <option v-for="image in images" :value="image">{{ image }}</option>
        </select>
        <br><br><br>
        
        <img v-if="selectedStep3" :src="selectedStep3" alt="선택된 이미지">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                selectedStep1: '',
                selectedStep2: '',
                selectedStep3: '',
                breeds: [],
                subBreeds: [],
                images: []
            },
            methods: {
                async fetchStep1Options() {
                    const response = await fetch('https://dog.ceo/api/breeds/list/all')
                    const data = await response.json();
                    this.breeds = Object.keys(data.message).map(breed => ({
                        id: breed,
                        name: breed
                    }));
                    if (this.selectedStep1) {
                        this.fetchStep2Options();
                    }
                },
                async fetchStep2Options() {
                    this.images = []; // 이미지 초기화
                    if (this.selectedStep1) {
                        const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/list`)
                        const data = await response.json();
                        this.subBreeds = data.message;
                        if (!this.subBreeds.includes(this.selectedStep2)) {
                            this.selectedStep2 = '';
                            this.selectedStep3 = '';
                        } else {
                            this.fetchStep3Options();
                        }
                    } else {
                        this.selectedStep2 = '';
                        this.selectedStep3 = '';
                    }
                },
                async fetchStep3Options() {
                    this.images = [];
                    if (this.selectedStep2) {
                        const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/${this.selectedStep2}/images/random/10`)
                        const data = await response.json();
                        this.images = data.message;
                        if (!this.images.includes(this.selectedStep3)) {
                            this.selectedStep3 = '';
                        }
                    } else {
                        this.selectedStep3 = '';
                    }
                }
            },
            async mounted() {
                this.selectedStep1 = 'pointer';
                this.selectedStep2 = 'germanlonghair';
                this.selectedStep3 = 'https://images.dog.ceo/breeds/pointer-german/n02100236_3798.jpg';
                await this.fetchStep1Options();
            }
        });
    </script>
</body>
</html>

Vue.js & web api 를 활용한 동적 select box 구현하기 (using cdn)

댓글