Web Tutorials

BIGGEST AND FASTEST Web Tutorials – live24u.com

img
Home / JavaScript / Vuejs DropDownList Options Set Single-Multiple selected

Vuejs DropDownList Options Set Single-Multiple selected

/
/
/
20 Views

Vuejs DropDownList Options Set Single-Multiple selected

In this Post We Will Explain About is Vuejs DropDownList Options Set Single-Multiple selected With Example and Demo.

Welcome on live24u.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to set selected value of dropdown in Vuejs

In this post we will show you Best way to implement Vuejs dropdown Options to show current selected item, hear for How to Vuejs Set selected option of HTML Select DropDownList with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You can download source code and Demo from below link.




index.html Form Input Bindings

Different behaviour of : simple selected value and v-model in a select and dropdown menu when dynamically adding options while none is yet selected using vuejs Like as a Single select or Multiple select (bound to Array) here source code to learn Dynamic options rendered with v-for using vuejs.

<body>
    <div id="liveApp"></div>
</body>

index.js

If the initial simple value of your v-model and select box expression does not match data any of the options, so we can used to the select element will using vuejs render in an some “unselected” state.as well as A native Vue.js simple select component selected data that provides similar options functionality to used to some Select2/Chosen without any more the overhead of like as a jQuery.

new Vue({
    el: '#liveApp',
    template: `
        <div class="cascading-livedropdown">
            <div class="livedropdown">
                <span>Country List:</span>
                <select v-model="selectedContinent">
                    <option value="">Select a Country List</option>
                    <option v-for="(country_obj, getcountry) in getplaces" :value="getcountry">{{getcountry}}</option>
                </select>
            </div>
            <div class="livedropdown">
                <span>Country:</span>
                <select :disabled="listCountry.length == 0" v-model="countrySelected">
                    <option value="">Select a Country</option>
                    <option v-for="(city_obj, getcity) in listCountry">{{getcity}}</option>
                </select>
            </div>
            <div class="livedropdown">
                <span>City:</span>
                <select :disabled="listcities.length == 0" v-model="citySelect">
                    <option value="">Select a City</option>
                    <option v-for="getcity in listcities">{{getcity}}</option>
                </select>
            </div>
        </div>
    `,
    data: function() {
        return {
            getplaces: {
                "Asia": {
                    "A steps": ["A1", "A2", "A3", "A4"],
                    "B steps": ["B1", "B2", "B3", "B4"],
                    "c Steps": ["C1", "C2", "C3", "C4"],
                    "d steps": ["D1"],
                    "E steps": ["E1", "E2", "E3", "E4"]
                },
                "Europe": {
                    "F steps": ["F1", "F2", "F3", "F4", "F5", "F6"],
                    "G steps": ["G1", "G2", "G3", "G4"],
                    "H steps": ["H1", "H2", "H3", "H4"]
                }
            },
            listCountry: [],
            listcities: [],
            selectedContinent: "",
            countrySelected: "",
            citySelect: ""
        }
    },
    watch: {
        selectedContinent: function() {
            this.listCountry = [];
            this.listcities = [];
            this.countrySelected = "";
            this.citySelect = "";
            if (this.selectedContinent.length > 0) {
                this.listCountry = this.getplaces[this.selectedContinent]
            }
        },
        countrySelected: function() {
            this.listcities = [];
            this.citySelect = "";
            if (this.countrySelected.length > 0) {
                this.listcities = this.getplaces[this.selectedContinent][this.countrySelected]
            }
        }
    }
})

Style.css

.livedropdown {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #DDD;
}

.livedropdown span {
    display:inline-block;
    width: 80px;
}

You can download source code and Demo from below link.




Example

I hope you have Got Vuejs Set selected option of HTML Select DropDownList And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Vestibulum nec placerat orci. Mauris vehicula

Vestibulum nec placerat orci. Mauris vehicula,Vestibulum nec placerat orci. Mauris vehicula

It is main inner container footer text